Archive for February, 2011

Simple Enhancement to SimpleDrop

Posted by
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.
Back to TOP Page UP Page DOWN