Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 30

// hide the dropdown
$ ( this ). removeClass ( 'main-nav-item-active' );

});

});

Here, we start by finding the overall width of the tab area. Because recalculating the width for
each tab is not necessary, we can define it outside of our hover listener.

Next, we find the width of the dropdown and determine the maximum left value, which is the
overall tab width minus the width of the dropdown.

Finally, instead of always positioning the dropdown directly beneath the tab, we use the
Math.min() method to pick the lowest between the tab offset and the maximum left value.

20

Thus, we confine the dropdown to the area beneath the tabs and avoid any content issues.

OTHER APPROACHES

While this script is fully functional, we could still improve the user experience . Currently, when
the user mouses away from the dropdown, the menu hides immediately. You could build a
delay using setTimeout() to ensure that the dropdown remains visible when the user mouses
away and then quickly mouses back. This creates a better experience, because it avoids
hiding the dropdown during accidental movements.

If you'd rather avoid setTimeout() , you could also look into the hoverIntent jQuery plug-in ,

21

which makes fine-tuned control over mouse actions much easier.

Besides improving the user experience, you could also avoid jQuery altogether in all
browsers except IE6.

Instead of using jQuery's hover() listener, we could use the CSS pseudo-class :hover to
hide and show the dropdown.

One downside with the CSS-only solution is that you can't build a delay for the :hover
pseudo-class.

Also, you will have to position the dropdown manually under each tab to avoid the overflow
issues. Alternatively, if you aren't concerned with overflow issues, you could attach position:
relative to each list item and avoid setting any positions manually.