I’ve looked around at many dropdown menu packages that are out there, and I’ve been using a very simple implementation called SimpleDrop from Javascript Array. SimpleDrop does everything I need: you use an unordered list for the menu items, include a tiny bit of jQuery, and set the styling for your menu. SimpleDrop has a built-in delay when the mouse moves off an item, but it immediately invokes itself when the mouse moves over an item. This turns out to cause excessive jumpiness if you have a lot of menu items. On one site, I also mixed in a mega-dropdown item off one of the top-level items, and the jumpiness is really obvious.
The answer is simple — use the nifty hoverIntent plugin to manage the dropdown events. If you’re not aware of it, hoverIntent delays the invocation of the mousedown event until a settable threshold is reached. This allows you to slide the mouse quickly across a bunch of menu items without triggering a dropdown event on each one. Much less confusing!
To use hoverIntent with SimpleDrop, first load the hoverIntent.js code. Next, change the invocation of simpledrop to use hoverIntent.
OLD VERSION:
$(document).ready(function() {
$('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)
});
document.onclick = jsddm_close;
NEW VERSION:
$(function() {
$('#jsddm > li').hoverIntent(jsddm_open, jsddm_timer);
document.onclick = jsddm_close;
});
That’s really all it takes, and it definitely adds a lot to the package. I did try suggesting that Javascript Array add this bit to their page, but I got no response. They disallow comments on their site, however, and I guess my email went into the bottomless bit bucket.
Tags: dropdown menu, jQueryPosted by dff
