Beispiel: Seitennavigation mit Details / Summary

Was?

Die Navigation soll folgende Eigenschaften haben:

Wie?

Basis der Navigation ist eine verschachtelte Liste. Um die Liste und die Unterlisten ein- und ausblenden zu können, werden sie in ein details-Element gelegt. Die Bereichsüberschriften kommen in ein summary-Element.

Vor die Navigation wird noch ein Skip-Link gesetzt, um Tastatur-Benutzern sowie Besuchern mit assistiven Techniken zu ermöglichen, direkt zum Inhalt zu springen. Per css wird dieser Link aus dem Viewport geschoben und nur bei Focus sichtbar.

Um Besucher mit assistiven Techniken zu informieren, erhält die Navigation noch eine visuell versteckte Überschrift.

Per css wird die Navigationsliste je nach Seitenbreite im Quer- oder Hochformat angeordnet. Da noch nicht alle Browser details/summary unterstützen und eine Feature-Detection und ein Polyfill nur per Javascript möglich sind, werden die Angaben für die absolute Positionierung und die Klasse für die Seitenbreite (wide) im Javascript gesetzt.

Auf schmalen Viewports wird die Navigation hinter einem "Menü-Button" versteckt. Bei Klick öffnet sich die erste Ebene nach unten und die zweite und dritte nach rechts. Auf genügend breiten Viewports ist der "Menübutton" versteckt und die erste Ebene ist immer sichtbar und waagrecht angeordnet. Die zweite Ebene öffnet nach unten, die dritte nach rechts.

In die Navigation wurde auch ein Untermenü für die Sprachwahl eingebaut. Damit das Sprachwahl­menü unabhängig von der Sprache erkannt wird, wurde hier das durch die „Language Icon Initiative” vorgeschlagene Standard-Icon für Sprachwahlmenüs gewählt.

Um die Bedienung der Navigation noch etwas komfortabler für die Besucher zu gestalten, wird im Javascript dafür gesorgt, das nur ein Navigationsbereich offen ist, und das bei Mausklick bzw. Touch außerhalb der Navigation und bei der Escapetaste alle Navigationslisten geschlossen werden.

In der Beispieldatei sind HTML, CSS, Javascript für das Menü und Javascript für das Polyfill in einer Datei zusammengefasst. Im Einsatz sollten die Teile in getrennten Dateien untergebracht werden. Das Polyfill sollte auch nur bei Bedarf geladen werden. Dazu kann der auskommentierte Code (// Polyfill für IE und MS-Edge bei Bedarf laden) verwendet werden.

Ohne Javascript werden alle Menüpunkte und Unterpunkte vertikal vor dem Inhalt angezeigt.