Das Fleisch am Knochen
CSS und JavaScript kommen hinzu
Wie eingangs erwähnt, werde ich das CSS und JavaScript nicht detailliert erklären, das nötig ist, um das HTML-Gerüst der Navigation in ein interaktives Dropdown-Menü zu verzaubern. Hier stehen nur ein paar Hinweise dazu:
- Das Öffnen und Schliessen der Dropdowns wird mit JavaScript gesteuert
- Das ginge auch mit der CSS-Pseudo-Klasse
:hover, jedoch kann mit JS meiner Meinung gezielter vorgegangen werden. :hover wird auf Touch-Screens nur mit zusätzlichen Aufwand einsatzfähig gemacht.
- Damit das CSS und JavaScript eingreifen können, muss die Methode, die den HTML-Code für die Navigation zurückgibt, erweitert werden (s. Code der Klasse). Dieser Arbeitsschritt ist zugegebenermassen ziemlich mühsam und erfordert Fleiss: Die Attribute mit den CSS-Klassen müssen am richtigen Ort hinterlegt werden. Am besten schaust du dir den Quellcode der Navigation im Beispielprojekt (Link s. unten) an.
ARIA-Attribute
- Wichtiger Bestandteil des Codes für das Menü sind ausserdem die die ARIA-Attribute. Dazu findest du Infos auf der nächsten Seite.
- Das Steuern der ARIA-Attribut-Werte für
aria-expanded geht nur mit JS, ein Argument mehr für den Einsatz dieser Technologie.
Das Beispiel-Projekt
Du kannst hier das Beispiel-Projekt anschauen und die Naviagtion ausprobieren:
Startseite Projekt
Links