Vertikales Navigationsmenü mit verstecktem Submenü
jawa
- javascript
Hallo allerseits,
also ich hab ein ziemlich einfaches Menü:
<ul id="navigation">
<li><a href="#">Menüpunkt 1</a>
<ul>
<li><a href="#">Menüpunkt 1.1</a></li>
<li><a href="#">Menüpunkt 1.2</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 2</a>
<ul>
<li><a href="#">Menüpunkt 2.1</a></li>
<li><a href="#">Menüpunkt 2.2</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 3</a>
<ul>
<li><a href="#">Menüpunkt 3.1</a></li>
<li><a href="#">Menüpunkt 3.2</a></li>
</ul>
</li>
Mit folgendem Code für jQuery werden jeweils alle Submenüs versteckt, und nur beim Mouseover vom jeweiligem Menüpunkt angezeigt:
$("#navigation li").hover(function() { //Hover over event on list item
$(this).find("ul").show(); //Show the subnav
} , function() { //on hover out...
$(this).find("ul").hide(); //Hide the subnav
});
Funktioniert eigentlich wunderbar. Nur ist das Problem das wenn ich beispielsweise die Maus auf Menüpunkt 1 habe, dann runterfahre auf Menüpunkt 1.2 und von dort aus weiter auf Menüpunkt 2 möchte, sofort das Menü 3 aufspringt und ich erst wieder nach oben zurück muss. Bei dem kleinen Beispiel scheint das unnötig zu sein, aber wenn man sich das ganze mit größeren Navigationen vorstellt, ist es wirklich sehr unpraktisch..
Weiß jemand Rat?
Liebe Grüße
Weiß jemand Rat?
Lasse das Auf- und Zufahren des Untermenüs gemächlicher vonstatten gehen (etwa mit .hide('slow')).
Gruß, LX
Weiß jemand Rat?
Lasse das Auf- und Zufahren des Untermenüs gemächlicher vonstatten gehen (etwa mit .hide('slow')).
Das funktioniert nicht, da die animation bereits ausgelöst wird.
In diesem Fall ist ein Kombinantion aus .delay() und .stop() (Argumente beachten!) wesentlich schlauer.
Das .delay() verzögert allgemein bis dann die Animation ausgelöst wird, das .stop() sorgt dafür, dass bestehende Einträge aus der Effekt-Schleife genommen werden - z.B. auch das delay(). Ansonsten würde beim erneuten mouseover das delay() trotzdem weiterlaufen und das hide() auslösen und dann das .show() hinten dranhängen. Damit würde das Menü flackern.