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

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
June 07, 2010
  1. · Building a Drop-Down Menu with the HoverIntent jQuery Plug-in
  2. · Building the menu's structural markup
  3. · Defining the visual presentation and dynamic behavior of the sample menu
  4. · Binding the CSS styles and JavaScript code to the menu's markup

print this article

Building a Drop-Down Menu with the HoverIntent jQuery Plug-in
(Page 1 of 4 )

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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials