Building a Drop-Down Menu with the HoverIntent jQuery Plug-in

If you're one of the many web designers who use jQuery for adding dynamic behavior to elements on your (X)HTML pages, then you may want to take an in-depth look at its "hoverIntent" plug-in. This compact and powerful library, created by Brian Cherne, will let you build fully customizable delayed rollovers in a snap without having to directly face the inherent complexities of plain JavaScript timers.

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!