Navigationsmenü mit Hover-Untermenüs

Um eine grosse Webseite mit vielen Unterseiten übersichtlich in einem Navigationsmenü unterzubringen wird häufig auf eine sich bei einem Mausklick ausfaltende Struktur gesetzt. Um es aber so benutzerfreundlich wie möglich zu machen ist es eine interessante Idee, dieses Ausfalten bereits dann geschehen zu lassen, wenn der Mauszeiger nur schon über dem entsprechenden Menüeintrag hovert. CSS bietet mit dem :hover-Attribut zwar eine einfache Möglichkeit, dies zu bewerkstelligen, diese hat aber den Nachteil, dass sich das Dropdown-Menü unmittelbar nachdem der Mauszeiger den Menüeintrag wieder verlässt, wieder schliesst. Dies kann im unglücklichsten Fall dazu führen, dass es tatsächlich schwierig ist, die gewünschte Seite aufzurufen.

 

Eine elegantere Lösung bietet JavaScript. Denn damit ist es möglich, das Erscheinen und Verschwinden des Dropdown-Menüs verzögert auszuführen.

 

Der hier wesentliche HTML-Teil sieht wie folgt aus; natürlich würde ein richtiges Navigationsmenü einige Einträge mehr haben und wohl auch einige weitere Klassen für die Darstellung.

Dazu kommen einige Zeilen JavaScript, welche an beliebiger Stelle im HTML-File eingefügt werden können. Es ist zu beachten dass es sich auf die Namen (ID's) der obigen Elemente bezieht.