Adding delay on megamenu hoverout wordpress

Question

The moment i remove my mouse pointer from my menu, it all disappears and I find it very annoying. I would like to either simply have a little delay so that the menu is more forgiving for when I accidentally slide outside of it or maybe use hoverIntent. Problem is that no matter how much I google it, I cant find anywhere where there is a guide comprehensible enough for me. I'm a real novice when it comes to javascripting. :)

I have found this under scripts.js which I figure is the programming that controls the menus hover properties:

// STARTS MEGA MENU
var temp, menu = jQuery("#navigation .menu");
menu.find("li").hover(function(){
    jQuery(this).children('.children').hide().slideDown('normal');
    if(jQuery(this).hasClass('mega-item'))
        jQuery(this).children('.children').find('.children').hide().slideDown('normal');
    try{
        $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
        if($tmp>0){
            jQuery(this).children('.children').css("right","0");
        }
    }
    catch(e){}
},function(){
    jQuery(this).children('.children').stop(true,true).hide();
}); 

menu.children("li").each(function(){
    temp = jQuery(this);
    if(temp.children().hasClass("children"))
        temp.addClass("showdropdown");

    if(temp.hasClass('rel'))
        temp.find('.children').append('<span class="mg-menu-tip" style="width:'+temp.width()+'px"></span>');
    else
        temp.find('.children').append('<span class="mg-menu-tip" style="left:'+(temp.position().left-20)+'px;width:'+temp.width()+'px"></span>');
});


menu.find(".children.columns").each(function(){
    $countItems=1;
    jQuery(this).children(".mega-item").each(function(){
        temp = jQuery(this);
        if(temp.hasClass("clearleft")){
            $countItems=4;
        }else if(($countItems%3)==1 && $countItems!=1){
            temp.addClass("clearleft");
        }
        $countItems++;
    });
});
$i = 0;
menu.find(">li>ul.children").each(function(){
    jQuery(this).find('>li>ul.children').parent().find('>a>span').addClass('menu-span-arrow').html('â–º');
});
menu.find("ul.children>li").hover(function(){
    jQuery(this).children("ul.children").css('left', (jQuery(this).width()-5)+"px");       
});
// END MEGA MENU

Im sorry if this might be a rather specific question but every time I try to implement something from other peoples questions, I crash my site :P

Thanks in advance!

EDIT: I have hoverIntent registered under functions.php as

wp_register_script('hoverIntent2', get_template_directory_uri() . '/js/jquery.hoverIntent.js');

and enqueued a bit later by wp_enqueue_script('hoverIntent2');

Im still checking this post daily hoping that somebody can help! :) — user2822186, Oct 29 '13 at 10:31

score 0 · Answer 1 · answered Nov 17 '13 at 19:49

Sooo I asked my friend to help me and after an hour or so, this is what we ended up with (which I am happy with :)):

// STARTS MEGA MENU
var temp, menu = jQuery("#navigation .menu");
var menu_show = false;
var menu_timeout;
var menu_object;

menu.find("li").not('.mega-item').hover(function(){
    jQuery(this).children('.children').hide().slideDown('normal');
    if(jQuery(this).hasClass('mega-item'))
        jQuery(this).children('.children').find('.children').hide().slideDown('normal');
    try{
        $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
        if($tmp>0){
            jQuery(this).children('.children').css("right","0");
        }
    }
    catch(e){}
},function(){
    jQuery(this).children('.children').stop(true,true).hide();
}); 

jQuery('#menu-item-2462').hover(function(){

    clearTimeout(menu_timeout);

    menu_object = jQuery(this).children('.children');

    if(!menu_show) {
        menu_show = true;

        jQuery(this).children('.children').hide().show();
        if(jQuery(this).hasClass('mega-item'))
            jQuery(this).children('.children').find('.children').hide().show();
        try{
            $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
            if($tmp>0){
                jQuery(this).children('.children').css("right","0");
            }
        } catch (e) {}
    }
},function(){

    menu_timeout    = setTimeout(function() { menu_object.stop(true,true).hide(); menu_show = false;} , 500);



}); 



menu.children("li").each(function(){
    temp = jQuery(this);
    if(temp.children().hasClass("children"))
        temp.addClass("showdropdown");

    if(temp.hasClass('rel'))
        temp.find('.children').append('<span class="mg-menu-tip" style="width:'+temp.width()+'px"></span>');
    else
        temp.find('.children').append('<span class="mg-menu-tip" style="left:'+(temp.position().left-20)+'px;width:'+temp.width()+'px"></span>');
});


menu.find(".children.columns").each(function(){
    $countItems=1;
    jQuery(this).children(".mega-item").each(function(){
        temp = jQuery(this);
        if(temp.hasClass("clearleft")){
            $countItems=4;
        }else if(($countItems%3)==1 && $countItems!=1){
            temp.addClass("clearleft");
        }
        $countItems++;
    });
});
$i = 0;
menu.find(">li>ul.children").each(function(){
    jQuery(this).find('>li>ul.children').parent().find('>a>span').addClass('menu-span-arrow').html('►');
});
menu.find("ul.children>li").hover(function(){
    jQuery(this).children("ul.children").css('left', (jQuery(this).width()-5)+"px");       
});
// END MEGA MENU

I hope this helps somebody! Best regards :)

Adding delay on megamenu hoverout wordpress

1 Answers1