Help needed with submenu functionality, Timeout

Question

Hi All,

I'm working on this menu for a intranet system. I have a menu system which is partially working.

I have added the code to here: http://jsbin.com/eloxe3/8

The menu items with a light grey background have a submenu...whereas the others do not. I need some help in making the submenu disappear after I hover over a link without a submenu for 1 second.

I have this function that shows the submenu...& would like the new code to follow similar principles

$(".menu-arrow").hover(function(){
    $.data(this, "timer", setTimeout($.proxy(function() {
       $(this).click();
   },this),500));
},function(){
    clearTimeout($.data(this, "timer"));
});

...(Sorry the users of this Intranet are novices...just in case they acidentally rollover a link)

Any help is GREATLY APPRECIATED, Thanks

Answer 1

Looking at the source you should bind no-submenu with a hover state.

$('.no-submenu').bind('mouseenter',function(){
    //at this point the mouse is over a link with no submenu.
    //So we close all submenus
    $('.rtmenu').hide().delay(1000);
})

Im unsure weather delay would work with hide but you can give it a go, if it does not then try the following:

$('.no-submenu').bind('mouseenter',function(){
    //at this point the mouse is over a link with no submenu.
    //So we close all submenus

    var T = setTimeout(function(){
         $('.rtmenu').hide();
         clearTimeout(T);
    },1000)
});

I may be wrong with this but you can give it a whirl anyway.

a small update to for clearTimeout

Try something along the lines of this instead:

var _TimeOut;
$('.no-submenu').hover(,function(){
    var _TimeOut = setTimeout(function(){$('.rtmenu').hide();},1000)
},function(){
    clearTimeout(_TimeOut);
});

Just not that $('.rtmenu').hide() may need to be $('.level2').hide() and you might be alittle better of being specific with .css('display','none')

Hover docs are here: http://api.jquery.com/hover/

Answer 2

Take a look at the hoverIntent plugin. It triggers only if the cursor is hovering over an element.

var hideSubmenus = function () {
    $('.rtmenu').hide()
};

$(".no-submenu").hoverIntent({
    over: hideSubmenus,
    out: function () { /* do nothing */ }
});

This way the submenu won't be hidden if they accidentally move the cursor out of the menu and then quickly back in again, which is often the problem with submenus in my experience.