Our Intranet Project uses Megaflyout for displaying our site Navigation which was suggested as
a better replacement of simple drop-down menus. The benefits of using megaflyouts are well described
in jacob nielsen’s article http://www.useit.com/alertbox/mega-dropdown-menus.html The article talks about speed considerations in megaflyout as:
Don’t make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that’s hover-dependent,
such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds
of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.
Thus, the timing should be:
1. Wait 0.5 seconds.
2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.
The above recommendations from Jacob Nielsen are very useful in order to develop a usable megadropdown. But to implement suggestions on speed you will have tough time if you are using simple javascript or jQuery. Luckily enough for targeting this specific problem a wonderful jQuery plugin hoverIntent can be used. The use of the plugin is quite simple. The js library for hoverIntent needs to be included after the jQuery main library.
Now you can select a particular element on which you want to have hoverIntent behavior.
jQuery(‘#menuItem’).hoverIntent(config);
Where menuItem is the id of the object on which you want the behavior and config is the configuration object which has predefined properties and behavior for example:
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: waitChange0, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: nothing0 // function = onMouseOut callback (REQUIRED)
};
As we can see the config object has interval and timeout properties for defining delays onMouseover and Mouseout respectively and over and out are the two callback methods that happens after these delay intervals.
Megaflyouts speed and jQuery hoverIntent Plugin.