Menü 9: Kopiervorlage

Dieses Beispiel erweitert die CSS-basierte Variante um einige Zusatzfunktionen, die das Dropdown-Menü für alle benutzbar machen.

Ziele sind:

1. HTML: verschachtelte Listen mit bis zu drei Ebenen ohne Klassen
2. CSS: Auf schmalen Viewports vertikal - auf genügend breiten Viewports horizontal angeordnet.
3. 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 ↹ angetabbt und dann mit⏎ oder Space ausgewählt werden.
     (Shift+↹ führt zurück!)
   • ESC schließt das aufgeklappte Menü

Kopiere das JavaScript in eine eigene Datei und binde sie in jeder Seite deiner Webpräsenz ein.