Combine hover intent with Long Drop Down solution from CSStricks WordPress
- REFUNDED
This is a jQuery question for a WordPress site.
I managed to activate the hoverintent for the navigation, but I have a problem for a very long drop-down which is customized using this: [[LINK href="http://css-tricks.com/examples/LongDropdowns/"]]http://css-tricks.com/examples/LongDropdowns/[[/LINK]]
This is the link to the website and the Second menu Vehicle Category does not gets inherit the hoverintent: [[LINK href="http://bit.ly/34XhDb"]]http://bit.ly/34XhDb[[/LINK]]
I am sure that it is a problem on how the jQuery code is organized:
I really hope a jQuery expert can help out me here:
//jQuery solution for VERY long drop down menus
var maxHeight = 406;
jQuery(document).ready(function(){
jQuery("#main_catnav li.catvehmake").hover(function() {
var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller
// need to save height here so it can revert on mouseout
jQuerycontainer.data("origHeight", jQuerycontainer.height());
// so it can retain it's rollover color all the while the dropdown is open
//jQuery('ul#main_catnav li.catvehmake').addClass("hover");
// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({
marginTop: "42px"
});
// hides the dropdown beneath the parent
jQuery('ul#main_catnav').css({overflow: "hidden"});
// don't do any animation if list shorter than max
if (multiplier > 1) {
jQuerycontainer
.css({
height: maxHeight
})
.mousemove(function(e) {
var offset = jQuerycontainer.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier);
if (relativeY > jQuerycontainer.data("origHeight")) {
jQuerylist.css("top", -relativeY + jQuerycontainer.data("origHeight"));
};
});
}
}, function() {
var jQueryel = jQuery(this);
// put things back to normal
jQueryel
.height(jQuery(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
jQuery('ul#main_catnav').css({overflow: "visible"});
});
// Add down arrow only to menu items with submenus
jQuery("#main_catnav ul > li:has('ul')").each(function() {
jQuery(this).find("a:first").append("<span class='has_ul'> ></span>");
});
});
//add hover intent to dropdown
jQuery(document).ready(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 800, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
jQuery(this).addClass("hover");
jQuery('ul:first',this).fadeIn();
}
function doClose() {
jQuery(this).removeClass("hover");
jQuery('ul:first',this).fadeOut();
}
jQuery("ul#main_catnav li, ul#main_catnav li ul li:has(ul)").hoverIntent(config);
});