HoverIntent in WordPress

Whenever you’re working on a new WordPress theme that includes hover (mouseover) effects, especially dropdown or flyout menus, you might want to include hoverIntent. HoverIntent is a term that describes a concept through which you delay a hover action until a certain amount of time has passed, in order to make sure that the user really intended to trigger that action.

We’ve all been on websites with dropdown menus that tend to get in the way of the content, and pop open as soon as your mouse touches even a small portion of them, and we’ve most likely all been annoyed by it. The idea behind hoverIntent is to measure the speed of the mouse movement, attempting to determine whether the user actually intended to stop on the item or not. If the mouse just moves over an item with a hover effect, but doesn’t stop on it, the hover effect should not be triggered; if, however, the user’s mouse does slow down enough or stop on the item, the hover effect should be triggered.

CSS: Fluid-Width Dropdown Menus

More than seven years ago, a fantastic article was posted on A List Apart explaining how to create dropdown menus with pure CSS. Up until that point, most (if not all) Web developers and designers were using javascript in some way to make their dropdown and fly-out menus function. The concept, for whatever reason, was referred to as the “Suckerfish menu“.

Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu.