Search code examples
jquerytimeouthoverdelay

Help needed with submenu functionality, Timeout

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

Solution

  • 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/