Ausklappmenü mit Verzögerung

Sich einblendende Untermenüs beim Bewegen der Maus über den jeweiligen Hauptmenüpunkt sind heutzutage üblich. Man kann das sehr einfach per CSS realisieren. Nervig wird es aber, wenn das Menü so platziert ist, dass immer wieder unbeabsichtigt das Ausklappmenü erscheint, obwohl man mit der Maus ganz wo anders hin will. Hier hilft es, einen Verzögerungseffekt einzubinden z.B. mit jQuery.

Genauer gesagt benötigt man neben der jQuery Bibliothek das Plugin „hoverIntent“.
Zunächst das Ganze ohne Verzögerung und ohne JavaScript:
Das HTML:

<ul class="nav">
  <li class="dropdown"><a href="#">Menüpunkt 1</a>
    <ul class="dropdown-menu">
      <li><a href="#">Unterpunkt 1</a></li>
      <li><a href="#">Unterpunkt 2</a></li>
      <li><a href="#">Unterpunkt 3</a></li>
      <li><a href="#">Unterpunkt 4</a></li>
    </ul>
  </li>
  <li class="dropdown"><a href="#">Menüpunkt 2</a>
    <ul class="dropdown-menu">
      <li><a href="#">Unterpunkt 1</a></li>
      <li><a href="#">Unterpunkt 2</a></li>
      <li><a href="#">Unterpunkt 3</a></li>
      <li><a href="#">Unterpunkt 4</a></li>
    </ul>        
  </li>
  <li class="dropdown"><a href="#">Menüpunkt 3</a>
    <ul class="dropdown-menu">
      <li><a href="#">Unterpunkt 1</a></li>
      <li><a href="#">Unterpunkt 2</a></li>
      <li><a href="#">Unterpunkt 3</a></li>
      <li><a href="#">Unterpunkt 4</a></li>
    </ul>        
  </li>
</ul>

Das CSS:

.dropdown-menu {
  display:none;
  position:absolute;
  z-index:200;
  ...
}
.dropdown:hover .dropdown-menu {
  display:block;
}

Nun kommt jQuery ins Spiel:
Das modifizierte CSS:

/*.dropdown:hover .dropdown-menu {
  display:block;
}*/

und das JS:

$('.dropdown').each(function(){
  $(this).hoverIntent(function(){
    $(this).find('ul.dropdown-menu').fadeIn('fast');
  }, function(){
    $(this).find('ul.dropdown-menu').fadeOut('fast');
  });
})

Man verwendet hoverIntent() also analog zu hover(), das ja standardmäßig mit jQuery zur Verfügung steht.
Links:
http://api.jquery.com/hover/
http://cherne.net/brian/resources/jquery.hoverIntent.html