In this first part of a series, I introduce you to using the “hoverIntent” jQuery plug-in for creating delayed rollovers in a truly painless fashion. If you’re familiar with the basics of jQuery, then getting the plug-in up and running even without checking its official documentation is a breeze.
Introducing the HoverIntent jQuery Plug-in (Page 1 of 4 )
As one might expect, however, with rollovers having such a long life, they’ve been overused and misused; you can see that today when surfing many modern websites. The sad part of this story is that this quirky trend has indirectly affected (although with a pretty negative impact) the way that certain interfacing elements are designed to work, including typical navigational bars.
But why am I saying this? Well, let me elaborate on this concept a bit further with a simple example. Suppose for a moment that you’ve proudly built for your website an engaging mega menu which will display a set of additional items when the mouse is placed over each of its sections. If the menu bases its functionality on CSS “hover” pseudo classes, the items will become immediately visible when a visitor hovers on them.
This isn’t always the desired behavior. Even though in most cases users will move the mouse across your menu following a common pattern, this doesn’t mean that they intend to visit a specific section. Obviously, the result of this process will be a bunch of menu sections expanding and shrinking alternately without a specific purpose. Are you experiencing the same “déjà vu” sensation that I have right now? I bet you are.
True to form, “hoverIntent” makes building “delayed” and more usable rollovers a breeze, which visitors to your website will surely appreciate. Therefore, in the lines to come I’m going to take a close look at this useful jQuery add-on, so you can learn how to play with its default settings and tweak them to fit your needs.