How can I ensure that my menu is hidden?

Head out to http://brucegust.com/portfolio/verizon/test.php#. Click on the menu and then click on "regions." All of the submenus tend to stay open (Carolinas, Florida, Georgia / Alabama). I want the regions button to hide all of the corresponding submenus  so the user's starting point is always "collapsed" as opposed to it being a scenario where everything is visible / expanded.

I'm thinking I'm accomplishing that with the "regions" function in that every time you click on it, it tells the submenus to be hidden...

      function regions()
                        {
                              $(\'#contestant_sub\').hide();
                              $(\'#showdown_sub\').hide();
                              $(\'#contest_sub_level2\').hide();
                              $(\'#carolinas_sub_level\').hide();
                              $(\'#carolinas_basement_level\').hide();
                              $(\'#project_sub_level\').hide();
                              $(\'#florida_sub_level\').hide();
                              $(\'#florida_basement_level\').hide();
                              return false;
                        }

...but it's not working.

What am I missing?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hans LangerCommented:
Try adding in your CSS:

.submenu, .submenu ul{display:none}
Steve BinkCommented:
I see an error in your inline javascript.  LIne 117 is reporting an invalid "return" statement.  Try correcting that.
Slick812Commented:
you have incorrectly set up your menu, as the sub menus are NOT in the correct arrangement and stacking order! You have the "Florida" and "Georgia" subs , IN the "Carolinas" menu stack, and NOT in the same level of subs as the "Carolinas".  AS to your code -
function regions()
                        {
                              $(\'#contestant_sub\').hide();
                              $(\'#showdown_sub\').hide();
                              $(\'#contest_sub_level2\').hide();
                              $(\'#carolinas_sub_level\').hide();
                              $(\'#carolinas_basement_level\').hide();
                              $(\'#project_sub_level\').hide();
                              $(\'#florida_sub_level\').hide();
                              $(\'#florida_basement_level\').hide();
                              return false;
                        }

Open in new window

This is not how it works, please look at the code in the -
$(window).load(function(){


any thing you want hidden Initially can be placed here, NOT in some other function, I do not believe that the regions() function is ever called any way. you can eliminate the whole block of code in this section -
<script>
	
				function regions()
				{
					$('#contestant_sub').hide();
					$('#showdown_sub').hide();
					$('#contest_sub_level2').hide();
					$('#carolinas_sub_level').hide();
					$('#carolinas_basement_level').hide();
					$('#project_sub_level').hide();
					$('#florida_sub_level').hide();
					$('#florida_basement_level').hide();
					return false;
				}
				function contestant()
				{
					$('#regions_sub').hide();
					$('#carolinas_sub_level').hide();
					$('#carolinas_basement_level').hide();
					$('#project_sub_level').hide();
					$('#florida_sub_level').hide();
					$('#showdown_sub').hide();
					$('#contest_sub_level2').hide();
					return false;
				}
				function showdown()
				{
					$('#regions_sub').hide();
					$('#carolinas_sub_level').hide();
					$('#carolinas_basement_level').hide();
					$('#florida_sub_level').hide();
					$('#contestant_sub').hide();
					$('#contest_sub_level2').hide();
					return false;
				}

			return true; // THis line is a BIG BIG mistake
			} // this is also a mistake, these should never be here
			
</script>

Open in new window


and the sub menus as an <ul> are shown and hidden by this line -

$(this).closest('li').children("ul").toggle(200);

toggle( ) will hide and show on alternate touches.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Bruce GustPHP DeveloperAuthor Commented:
Slick! I took your counsel and we're gold. Everything is now showing up initially as I want it with everything collapsed appropriately.

Thing is, there's one additonal piece of functionality that I'm not executing correctly and I don't know where I'm falling short. Head out to https://www.countryshowdown.com/app. Click on the red menu icon in the upper right hand corner and notice the menu that appears. Click on any of expandable menu options and you'll see the toggle function happen exactly as you would expect. BUT, the thing that I dig is when you click on another menu option, the other menu that was expanded collapses at the same time the menu that you clicked on expands.

Now, that's cool.

I'm assuing that's happening as a result of one of the functions that you can see in the source code. For example, on line 73 you see:

function about()
            {
                  $('#contestant_sub').hide();
                  $('#showdown_sub').hide();
            }


Is this not the function that's being called on line 110? I was thinking that "onclick="return about();" was the function that was closing the other menus while the toggle functionality was expanding the one that you clicked on.

Whatever I was thinking, I'm off. Bottom line: I need to understand what I've got to do to make the other menus collapse while the one I'm clicking on expands.

There's a free digital Diet Pepsi in it for you...

What do you say?
Slick812Commented:
a free digital Diet Pepsi, WOW!

? ? ?
I have spent some more time in looking at the code for your link at -
    http://brucegust.com/portfolio/verizon/test.php

and the country music link at -
     https://www.countryshowdown.com/app.

And I am really not comfortable with the Menu you have chosen as in the -
   jquery.pushmenu.js
and I do not see any where on those pages where the
"Check Box and Radio Box" plugin is used as -
    jquery.ibutton.js
you do have  LINK <a> with a ibutton class, but it is empty? what's up with that? What is this suppose to do as an ibutton? ?

As far as I can tell the code in the  pushmenu.js is some sort of WordPress plug-in, and is really only about assigning the mouseover and mouseleave events, which are completely useless on touch screens (phones).

BUT, maybe I am not seeing the correct component constructions?

as far as it looks to me, there is NO pushmenu.js used in your menu, It looks to me to be all from the -
hamburger_menu.css
where it has -
/*this is the surface area of the pulldown menu */
.altMenu {
	position: absolute;
	display: none;
	top: 20px;
	font-size: 11px;
	width: 185px;
	padding-top: 6px;
	padding-left:0;
	margin-left: 120px;
	border-radius: 5px;
	z-index: 99999999;
	background-color:#282828;
}

Open in new window

and then in javascript you have -
     $('a').click(function() {
        $(this).closest('li').children("ul").toggle(200); //fade
      });

which shows and hides the sub <ul>.

you really need to not just "throw add ons" into your page build, and not know what they do or even if they are used. As far as collapse all open subs, on a new sub expand, this is not so easy, since it requires that the javascript search through all of the subs and close the expanded ones.

There are many, many other vertical menus that already have this collapse open on new expand built into it.
You may can look at the developer API for the hamburger menu and see if they have that in their code examples.

Your code work here is not "to the point and efficient" as you seem to have things in this that are not used, or are used but with no results, or are not needed.

For one thing , they use an OLD jquery version as -
     jquery/1.8.1/jquery.min.js

the version you should always use is the newest version, which now is 1.11.3  I think.
Slick812Commented:
I should say that you can "Manually" script the menu functioning with -

function about() {
  $('#contestant_sub').hide();
  $('#showdown_sub').hide();
  }

and then manually set the onclick in the <a>
   <a href="#" title="" onclick="return about();">About</a>

but this does not really do a add on menu kind of functioning result, you are just writing cutsom code to do your generalized menu functioning.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
I went back and cleaned up the code and found some superfluous characters - one in particular "return true, " that when eliminated made all the difference.

I'll be looking for a substitute for what I've worked on thus far at some point. The menu that I grabbed was from a project that I worked on a few years ago. I didn't write the code, I just like it's functionality. After looking at it from the the perspective your counsel inspired, I'm seeing some room for improvement. But I'm going to finish what I've started just so I can honor a deadline and go back and clean it up later.

Here's your DP...

Thanks, bud!
slick.jpg
Slick812Commented:
I am not trying now to add more off takes, and options, but the not so versatile hamburger menu, and it's simplistic javascript does not really compare to well tested and re-worked through several versions functional  vertical stack menus now available, some can be mostly CSS, and others are almost all javascript, and the good ones are VERY RESPONSIVE, and can be used in different ways, by changing some initiation options. You should not have used this just because you had it before, it does not do anything but a very standard , vertical stack of <li><a> menu elements, that can have a limited number of sub menus.
If you want to be a good web designer and coder, you should do the css and the javascript to do you own vertical stack menu from scratch, so you learn what to do and change, so when you use a more better, modern add-on menu, you'll know how  to fit it to your own site.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.