Dropdown Menü mit jQuery

Das Problem

Beim erstellen eines Blogdesigns bin ich auf ein interessantes Problem gestossen: jQuerys ‘.hover’-Event ist für Dropdownmenüs völlig ungeeignet. Das Event reagiert viel zu schnell. Fährt man mit der Maus mehrmals schnell über das Menü, beginnt es wie wild, auf- und zuzuklappen.

Die Lösung

Abhilfe schafft das jQuery-Plugin hoverIntent.

jQuery’s .hover()
hoverIntent’s .hover()

Der Dropdown-Effekt mit dem Plugin startet etwas später. Das Plugin wartet, bis die Maus für einen Moment absolut still steht. Dadurch ist sichergestellt, dass der Benutzer das Menü auch wirklich aufklappen wollte. Unbeabsichtigtes Aufklappen wenn man mit der Maus über die Seite fährt gibts nicht mehr.
Anstatt

verwenden wir jetzt

Struktur des Menüs

Um unser Menü so übersichtlich wie möglich zu strukturieren, verwenden wir Listen. So verlieren wir auch bei mehreren Ebenen nicht den Überblick. Die verschachtelte Liste kann beliebig viele Ebenen haben, wir werden unseren Code so strukturieren, dass das Menü ohne weitere Anpassungen damit klar kommt.

 

CSS und Styles

Die verschachtelte Liste sieht noch nicht besonders chic aus. Mit CSS werden wir das Menü jetzt stylen. Zuerst müssen wir die Punkte und Einzüge der Liste entfernen.

Danach muss die erste Ebene mit einem float versehen werden, damit sie in einer Zeile angezeigt wird.

Alle darunter liegenden Ebenen verstecken wir.

Die Listenelementene sollen sich voneinander unterscheiden.

Die verschachtelten Listen müssen richtig positioniert sein.

JavaScript

Der JavaScript-Teil ist denkbar simpel und kurz. Ein einziges hoverIntent-Event reicht aus.

 

Was ist, wenn JS deaktiviert ist?

Soweit so gut, wir sollten nun ein voll funktionsfähiges Dropdown-Menü haben. Doch was ist, wenn der Besucher JavaScript deaktiviert hat? Wir müssen unbedingt eine Alternative zum JavaScript-Menü bereitstellen. Unser JavaScript ergänzen wir um diese Codezeile:

Unser #menu erhält nun also eine ‘js’-Klasse, wenn der Besucher JavaScript aktiviert hat. Dies nutzen wir mit einem CSS-Schnippsel aus:

Das Menü sollte nun auch funktionieren, wenn JavaScript ausgeschaltet ist. Natürlich fehlen die Animationen, aber wenigstens funktioniert das Menü!

Das wars schon. Ich habe das Menü noch um einige Borders und Border-Radius ergänzt. Das fertige Beispiel lässt sich hier betrachten: Demo