Building a Drop-Down Menu with the HoverIntent jQuery Plug-in
In this final part of a six-part series on using the hoverIntent jQuery plug-in, you will learn how to easily implement delayed rollovers on your web pages as part of a larger drop-down menu. As you'll see, such rollovers are in general more accessible than the ones created using a standard approach.
Building a Drop-Down Menu with the HoverIntent jQuery Plug-in (Page 1 of 4 )
Naturally, if you've been a faithful follower of this article series, you now have a solid background in using the most relevant features provided by "hoverIntent." In previous tutorials I covered different capabilities that the plug-in offers, ranging from creating rollovers using its default configuration, to tweaking its optional arguments, such as polling intervals and sensitivity, and even delays added to "mouseout" events.
It's valid to point out, however, that all of the code samples created in preceding parts of the series used only a simple div to demonstrate how useful "hoverIntent" can be for building accessible rollovers. But of course, this doesn't imply that the plug-in should always be utilized in such a limited way. As you may guess, "hoverIntent" can be used in all sorts of situations (without abusing of it, by the way); one classic example where its implementation can be really beneficial is the development of more usable and accessible drop-down menus.
With that idea in mind, in this final installment of the series I'm going to show how to take advantage of "hoverIntent" for building a flexible navigational menu. It will be very easy to customize to fit different requirements and needs.
Ready to learn how to use this handy plug-in in a real-world project? Then jump ahead and start reading right now!