Beispiel: Seitennavigation mit popover

Was?

Die Navigation soll folgende Eigenschaften haben:

• Bis zu drei Ebenen.
• Auf schmalen Viewports vertikal angeordnet.
• Auf genügend breiten Viewports horizontal angeordnet.
• Bedienung mit Maus, Touch und Tastatur.

Wie?

Basis der Navigation ist eine verschachtelte Liste. Das Öffnen der erfolgt über einen Button vor den UL und die popover-Technik. Die Positionierung der Untermenüs erfolgt über die anchor-Technik.

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.

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 Sprachwahlmenü unabhängig von der Sprache erkannt wird, wurde hier das durch die „Language Icon Initiative” vorgeschlagene Standard-Icon für Sprachwahlmenüs gewählt.

In der Beispieldatei sind HTML, CSS und Javascript für das Menü in einer Datei zusammengefasst. Im Einsatz sollten die Teile in getrennten Dateien untergebracht werden.