Drop-down navigation with Time Delay

Do you want to add a small time delay to your navigation to avoid navigation drop-down on accidental hover? This tip shows how to create a basic cross-browser compatible drop-down navigation, with a time delay applied between mouse hover event and the drop-down action.

This example uses the hoverIntent jQuery plugin.

The purpose of having a time delay is so that navigation menus do not drop down when the visitor accidently swipes the mouse pointer over (and off) the navigation menu.

Drop-down navigation demo

Click here to see a drop-down menu with time delay in action.

Drop-down navigation HTML code

The HTML is exactly the same as in the basic Drop-down navigation with HTML and CSS demo.

Drop-down navigation CSS code

The CSS is almost the same as in the basic Drop-down navigation with HTML and CSS demo. The only difference is that 2 lines of CSS need the removed:

.nav-item:hover .nav-submenu { display: block; }

...and (for IE6)...

.nav a.nav-item-link-ie6:hover { overflow: visible; }

Drop-down navigation jQuery code

You need to download the hoverIntent jQuery file from the hoverIntent jQuery plugin page. Then, in your webpage:

• Load the jQuery code library
• Load the hoverIntent JavaScript file
• Write some simple jQuery code
• Optionally, the plugin has excellent configuration options to suit your needs

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script type="text/javascript">
/* For IE6 */
function makeTallIe6() {
  $(this).css("overflow", "visible");
}
function makeShortIe6() {
  $(this).css("overflow", "hidden");
}
$(".nav a.nav-item-link-ie6").hoverIntent( makeTallIe6, makeShortIe6 );

/* For other browsers */
function makeTall() {
  $(this).children(".nav-submenu").show();
}
function makeShort() {
  $(this).children(".nav-submenu").hide();
}
$("li.nav-item").hoverIntent( makeTall, makeShort );
</script>