Dieses Beispiel erweitert die CSS-basierte Variante um einige Zusatzfunktionen, die das Dropdown-Menü für alle benutzbar machen.
Ziele sind:
HTML: verschachtelte Listen mit bis zu drei Ebenen ohne Klassen
CSS: Auf schmalen Viewports vertikal – auf genügend breiten Viewports horizontal angeordnet.
JavaScript: Bedienung mit Maus, Touch und Tastatur
Jedes Listenelement mit einer Unterliste enthält zwei UI-Elemente:
den eigentlichen Link auf eine Unterseite und …
einen dynamisch erzeugten Button zum Öffnen/Schließen des Untermenüs.
Links und Buttons können mit der Tab-Taste ↹ erreicht und dann mit ⏎ oder Space ausgewählt werden.
(Shift+↹ führt zurück!)
Esc schließt das aufgeklappte Menü.
Um die Funktionsweise der Tastenbedienung zu demonstrieren, wurden die CSS-Regelsätze für li:hover ul auskommentiert. Oder klicke mit der Maus auf die Pfeil-Buttons.