I created a flyout menu using css and called the css class in javascript.The problem is, onmouseover the menu is highlighting and the pop up is coming under the menu when we move the mouse down towards the link the highlighting is not displaying. Please help me in how to get this resolved.
Code:
my JS code :
var num, current = false;
$('#site_navigation > li.items > a')
.hoverIntent(function(e){
//Clear out the open subnavs
$('.subnav').css('display','none');
var $$ = $(this);
num = parseInt(($$.parent().attr('id')).substr(4,1));
num -= 2;
var sel = '#subnav-' + num;
/*============================TRACE=========================
var o = {};
o.dir ='IN';
o.target = e.target;
o.relatedTarget = e.relatedTarget;
o.num = num;
o.sel = sel;
o.id = $$.parent().attr('id').substr(4,1);
log(o);
//============================END TRACE=====================*/
//1. show the subnav
$(sel).css('display','block');
//2. display the overlay
$('#overlay').removeClass('hide');
//3. Remove existing hover class, Add the 'hover' class to this item
rmHover();
$$.addClass('hover');
},
function(e){
//log(e, {'dir':'OUT','target':e.target, 'relatedTarget': e.relatedTarget});
//if the closest parent search returns zero, we know we're not in nav box anymore
checkAncestor(e,"#nav");
});
function checkAncestor(child, ancestor){
child = child.relatedTarget || e.fromElement;
var $elem = $(child).closest(ancestor);
if($elem.length <1) {
hideFlyout();
}
}
//when mouse levaes both top nav and flyout, and doesn't go from one to the other, close the flyout
$('#site_navigation, #flyout')
.mouseleave(function(e){
checkAncestor(e,"#nav");
});
//peg the first two links with a hide function.
$('.site_navigation > li:eq(0) a, .site_navigation > li:eq(1) a, .site_navigation > li:eq(2) a, .site_navigation > li:eq(3) a, .site_navigation > li:eq(5) a, .site_navigation > li:eq(6) a, .site_navigation > li:eq(7) a')
.mouseenter(function(){
hideFlyout();
});
function hideFlyout(){
rmHover();
//Hide the subnavs
$('.subnav').css('display','none');
//Hide the overlay
$('#overlay').addClass('hide');
}
function rmHover(){
//Remove the 'hover' class on nav item
$('#site_navigation .hover').removeClass('hover');
}
Comment