Do not open the submenu with the mouse

Question

The navigation menu I'm working on has the default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:

.main-navigation ul ul { display:none; } 

When hovering, the submenu is indicated:

 .main-navigation ul li:hover > ul { display:block; } 

For most JavaScript-oriented users, the menu is socked with the following jQuery snippet:

 jQuery(document).ready(function($) { /* cancel the default CSS hover behavior */ $('.main-navigation ul li').on('mouseover',function(){ $('.main-navigation ul li:hover > ul').css('display', 'none'); $(this).css('cursor', 'pointer'); }); /* toggle submenu display (if the submenu actually exists) */ $('.main-navigation ul li a').click(function() { var li = $(this).closest('li'); if(li.has('ul')) li.find('ul').slideToggle(100); }); }); 

This switch works fine, except that it only works as long as the mouse cursor remains over the parent link. If the submenu is open and the user moves the mouse from the parent link, the submenu closes.

Question: How to keep a submenu open during mouse output, if it is already open?

I tried adding something like this to my jQuery fragment:

 $('.main-navigation ul li').on('mouseout',function(){ if ($('.main-navigation ul li ul').css('display') = 'none') { $('.main-navigation ul li ul').css('display', 'none'); } else if ($('.main-navigation ul li ul').css('display') = 'block') { $('.main-navigation ul li ul').css('display', 'block'); } }); 

Not only is this mediocre coding, but it actually doesn't work .; - (

How do I fix this problem?

Thanks in advance for your suggestions!

Answer 1

I'm not sure what the click issue is (look at it), but you don't need JavaScript to “disable” CSS. Just use the <noscript> tags, for example:

 <noscript> <style type="text/css"> .exampleclass:hover { display: block; } </style> </noscript> 

Or you can simply add the no-js class to the main menu item and then remove that class if JS is enabled at the very beginning of your JavaScript. Then write your "no-js css" to use .no-js + any children instead of the main class.

UPDATE

The problem is simple when you use mouseover to cancel your non-js css, the menu is still hidden every time the user hangs over this submenu. In other words, you are not just deleting the “no js” css, you are hiding it every time you hover .main-navigation ul li !

Just do something in your first sentence, then remove the mouseover function completely and viola! the problem is solved!

I wrote jsFiddle using your code to show how I can approach it.

jsFiddle

code

 $(function() { // See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul` // See Also in HTML where i added class `no-js` to `#site-navigation` $(".no-js").removeClass("no-js"); $('.main-navigation ul li a').on("click", function(e) { // first hide sibling sub-menus! $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); }); // no need for the if statement you had. // jQuery is "smart", if it doesn't exist, // then this function simply won't do anything! $(this).closest('li').find('ul').slideToggle(100); }) // and just to add a little for ya, // the following will slideUp our submenu if user hovers away from MAIN MENU .closest("ul").on("mouseleave", function(e) { $(this).find("ul:visible").slideUp("slow"); }); }) 

Step by step

• If you have a manual script between the <script type="text/javascript"> tags, before you click the noscript tage, which you can remove, replace all your JSs as follows:

   <script type="text/javascript"> jQuery(document).ready(function(jQuery) { jQuery(".no-js").removeClass("no-js"); jQuery('.main-navigation ul li a').on("click", function(e) { $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); }); jQuery(this).closest('li').find('ul').slideToggle(100); }) // If you find the menu hiding to fast, simply remove or comment out the next 3 lines jQuery('.main-navigation ul').on("mouseleave", function(e) { jQuery(this).find("ul:visible").slideUp("slow"); }); }); </script> 

• Remove noscript TAGS

• In CSS code:

   /* Find the area that was written as */ .main-navigation ul li:hover > ul { display:block; } /* And replace it with the following */ .main-navigation.no-js ul li:hover > ul { display:block; } 

• Finally, look in your HTML, find the line written as <nav id="site-navigation" class="main-navigation" role="navigation"> , and replace it with:

   <nav id="site-navigation" class="main-navigation no-js" role="navigation"> 

Answer 2

so here IE did something neat, and jquery makes it browser agronomy so useful. mouseleave is the "mouseout" for the selected item and any sub-element of it in IE, and jquery makes it work for other browsers.

The mouseleave JavaScript event is the property of Internet Explorer. Due to the general event utility, jQuery simulates this event, so that it can be used independently of the browser. This event is dispatched when the mouse leaves the item. Any HTML element can receive this event.

mouseover - when someone changes over the "parent" ul li, you want to show any sub uls

click - when someone clicks on the parent ul li that you want to hide or show any sub uls

mouseleave - IE is determined that jquery does browser agnostic for you.

leave the menu operational using <noscript> tags and intend for javascript to be able to come from there, if available.

fiddle - this fiddle is just to give you a start, since I did not embed any of your css.

 $(function () { $("ul").on({"mouseover":function(event){ $(this).find("ul").show("slow"); }},"li.menu-item",null).on({"click":function(event){ $(this).find("ul").toggle("slow"); }},null,null).on({"mouseleave":function(event){ $(this).find("ul").hide("slow"); }},null,null); });