How can I open my submenu in the jQuery hover menu?

Question

I just started coding in jQuery last week and you need help on how to properly configure the menu. I have 3 tabs each with its own menu. When the page is displayed, the menu and submenu are automatically displayed. After it is displayed, the user can hover over the tabs to see other submenus, and when they stop hanging, a submenu will initially appear.

My problem is that although I can show them the submenu of other tabs, I cannot leave the submenu open for the user to click on the submenu item. Other tutorials show how to do this only when the submenu is nested in the parent element, but my code for the menu structure does not have submenus (this is how the code was when I joined the project). Is there a way to keep an open submenu if the user hovers over the corresponding tab?

Here is my HTML menu:

<div id="navigation"> <div id="main-nav"> <div id="kids"><a href="../images/nav1.png"></a></div> <div id="community"><a href="../images/nav2.png"></a></div> <div id="about"><a href="../images/nav3.png"></a></div> </div> </div> <div id="sub-nav"> <ul class="menu-1 requiresJS"> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> <li><a href="#">Item6</a></li> </ul> <ul class="menu-2 requiresJS"> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> <li><a href="#">Item6</a></li> </ul> <ul class="menu-3 requiresJS"> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> <li><a href="#">Item6</a></li> </ul> 

Here is my jQuery:

 // For JS users, display sub menus by default $(".requiresJS").css("display","block"); var startMenu //hide all sub menus $("#sub-nav ul").hide(); // check URL for about, community or kids and set startMenu with correct term if(window.location.href.indexOf("about") != -1){startMenu = "about"} else if(window.location.href.indexOf("community") != -1){startMenu = "community"} else{startMenu = "kids"} // highlight correct category tab $("div#main-nav #" + startMenu).addClass("selected"); // show correct starting menu $("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",distance:13 }, 300); // show correct menu on mouseover of div $("div#main-nav div").mouseover(function() { $("#sub-nav ul").stop(true, true) $("#sub-nav ul").hide(); var currentId = $(this).attr('id'); $("#sub-nav ul.menu-" + currentId).show(); }); $("div#main-nav div").mouseover(function() { $("#sub-nav ul").stop(true, true) $("#sub-nav ul").hide(); var currentId = $(this).attr('id'); $("#sub-nav ul.menu-" + currentId).show(); }); 

Answer 1

I had a similar case, and he solved it by splitting the mouseover event into separate mouseenter and mouseleave events. Just pseudocode / outline, but in your case try something like:

 $("div#main-nav div").mouseenter(function() { // Check if sub menu is open, return if it is allready open // (I add a 'menu_open' class to sub menu when it is opened) // Code to hide open submenues // Code to open selected submenu }); 

Then use the mouseleave property and the toElement property for its event to check where the mouse pointer moves if it falls into the submenu, do nothing if you do not close the entire submenu. Note that you also need to connect mouse events to the submenu. Something like that:

 $("#main-nav div").mouseleave(function (event) { var toElem = $(event.toElement); if (toElem.closest("div.sub-nav").id=="subnav") return; // Prob nicer way to do this...point is to check if mouse enters a submenu, and if so stay open. // Close all open submenues, eg $("#sub-nav ul").hide(); }); $("#subnav ul").mouseleave(function (event) { var toElem = $(event.toElement); if (toElem.closest("div.sub-nav").id=="subnav") return; // Check if entering submenu if (toElem.closest("div#main-nav")) return; // Check if entering main menu // Close all open submenues, eg $("#sub-nav ul").hide(); }); 

Hope this helps you. I just decided it myself, so I did not have time to polish it, I am sure that there are better and more beautiful ways to do it.

Answer 2

I had a similar situation, and, unfortunately, I could not reformat my entire menu to take into account the “correct” parent / child structure.

If you simply call up a submenu in the selector, it will remain “open” during the hang state.

http://jsfiddle.net/K5P9Z/

Example -

 jQuery(document).ready(function($) { $('#kids, .menu-1').hover(function() { $('.menu-1').show(); }, function() { $('.menu-1').hide(); }); $('#community, .menu-2').hover(function() { $('.menu-2').show(); }, function() { $('.menu-2').hide(); }); $('#about, .menu-3').hover(function() { $('.menu-3').show(); }, function() { $('.menu-3').hide(); }); });​