How to enable default submenu in jQuery hover menu

Question

It started with a question. Having received a brilliant answer, I ran into an unexpected gap in functionality: how can I open the default menu?

More specifically, if a user lands on a page that exists in my sub-navigator, I want this sub-navigator to be open with the current page highlighted. If they use the menu for viewing, it will change accordingly, but always return to the default state if they do not make a choice.

The code I use for this can be found in this jsfiddle .

The menu structure is similar:

<div id="mnav"> <ul id="buttons"> <li class="one"><a href="#">Main 1</a></li> <li class="two"><a href="#">Main 2</a></li> <li class="three"><a href="#">Main 3</a></li> <li class="four nav-dark"><a href="#">Main 4</a></li> </ul> </div><!-- /mnav --> <div id="snav"> <ul class="snav-one"> <li><a href="#">Sub 1.1</a></li> <li><a href="#">Sub 1.2</a></li> <li><a href="#">Sub 1.3</a></li> </ul> <ul class="snav-two"> <li><a href="#">Sub 2.1</a></li> <li><a href="#">Sub 2.2</a></li> </ul> </div><!-- /snav --> 

It has been suggested that the main idea is to freeze in order to return everything to how they were, and that makes sense, but how to maintain the original state in which the menu is located?

Answer 1

Based on this jsFiddle code, one approach would be as follows:

• The server sets the global variable on the GBL_bNoDefaultMenu page to true or false depending on whether this page has a default submenu. (JS can set a variable in ajaxified pages.)

• The server also marks the default submenu with the defaultMenu class.
  EG: <ul class="snav-two defaultMenu">

• Make sure the page has the style:

   #snav ul.defaultMenu { display: block; /* Or the correct visible display mode.*/ } 

• Then the following code should work: Note that all the main-nav buttons need a hover . In addition, everything was combined into a single hover() call. And depending on the production page, further simplification is possible.

See the demo in jsFiddle.

 $("#buttons li, #snav ul").hover (function (zEvent) {MenuOpenCloseErgoTimer (zEvent); } ); function MenuOpenCloseErgoTimer (zEvent) { var dDelay; var ActionFunction = null; if (zEvent.type == 'mouseenter') { if (zEvent.currentTarget.nodeName == 'LI') //-- Main nav. { dDelay = 300; ActionFunction = function (node) { //--- The first class is a special tie to a submenu, if it exists var subnav = 'ul.snav-' + $(node).attr ('class').split (' ')[0]; $("#snav ul").hide (); $("#snav").find (subnav).show (); //--- Not sure what going on with the "open" class. It irrelevant to this demo. if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideDown ('fast').addClass ("open"); }; } else //-- zEvent.currentTarget.nodeName == 'UL' //-- Sub nav. { dDelay = 0; ActionFunction = function (node) { $(node).show (); if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideDown ('fast').addClass ("open"); }; } } else //-- zEvent.type == 'mouseleave' { //--- Actions for main nav and sub nav are the same. dDelay = 200; ActionFunction = function (node) { if (GBL_bNoDefaultMenu) $("#snav").stop (true, true).slideUp ('fast').removeClass ("open"); $("#snav ul").hide (); $("#snav ul.defaultMenu").show (); } } if (typeof this.delayTimer == "number") { clearTimeout (this.delayTimer); } this.delayTimer = setTimeout (function() { ActionFunction (zEvent.currentTarget); }, dDelay); }