Adding HoverIntent or Similar
I am trying to fix a bug with a dynamic menu we are using in Wordpress. The menu slides down when you hover over the main categories. Basically, the problem is the sub menu can be quite wide if you have 3 levels of sub navigation. So when the menu expands to the sub menu, most users will accidentally slide over an adjacent parent menu item and that will completely change the sub menu items. Frustrating.
I found a function that accomplishes exactly what I need, it's called "HoverIntent". The problem is I see how to easily use "hoverIntent" to replace a "hover" tag. But the jquery code we are using, below, uses "mouseenter" and "mouseleave". Any ideas on how I could fix this using "hoverintent" or some similar type of function/delay?
- // main sub menu effect
jQuery(".nav > li").not(".nav ul li").bind('mouseenter',function(){
var submenu = jQuery(this).find( '.sub' );
if(jQuery('#content').css('margin-top')!='0px' && jQuery('#content').css('margin-top')!='100px'){
// fast transition
jQuery('#content').clearQueue();
jQuery('#content').stop();
jQuery('.nav li .sub').clearQueue();
jQuery('.nav li .sub').stop();
jQuery('.nav li .sub').slideUp(500);
jQuery('#content').animate({'margin-top':'10px'},500,function(){
jQuery(submenu).slideDown(100);
jQuery('#content').animate({'margin-top':'265px'},500);
});
}else{
//normal transition
jQuery('#content').clearQueue();
jQuery('#content').stop();
jQuery('.nav li .sub').clearQueue();
jQuery('.nav li .sub').stop();
jQuery('.nav li .sub').slideUp(500);
jQuery('#content').animate({'margin-top':'10px'},500,function(){
jQuery(submenu).slideDown(500);
jQuery('#content').animate({'margin-top':'265px'},500);
});
}
});
jQuery(".nav > li").not(".nav ul li").bind('mouseleave',function(){
if(jQuery('#content').css('margin-top')!='0px' && jQuery('#content').css('margin-top')!='100px'){
jQuery('#content').clearQueue();
jQuery('#content').stop();
jQuery('.nav li .sub').clearQueue();
jQuery('.nav li .sub').stop();
jQuery('.nav li .sub').delay(500).slideUp(500);
jQuery('#content').delay(500).animate({'margin-top':'10px'},500,function(){
jQuery('.nav li .sub').removeAttr('style');
});
}
});
jQuery(".nav > li").not(".nav ul li").bind('mouseleave',function(){
jQuery('#content').clearQueue();
jQuery('#content').stop();
jQuery('.nav li .sub').clearQueue();
jQuery('.nav li .sub').stop();
jQuery('.nav li .sub').slideUp(500);
jQuery('#content').animate({'margin-top':'10px'},500,function(){
jQuery('.nav li .sub').removeAttr('style');
});
});