Beispiel: Seitennavigation mit popover

Was?

Die Navigation soll folgende Eigenschaften haben:

Wie?

Basis der Navigation ist eine verschachtelte Liste. Das Öffnen der erfolgt über einen Button hinter den UL mit der 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 ausgeblendet 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 und CSS in einer Datei zusammengefasst. Im Einsatz sollten die Teile in getrennten Dateien untergebracht werden.

Probleme

Stand Mai 2025 unterstützten nur Chrome und Edge die anchor-Technik, daher wird in den Browsern, die die anchor-Technik nicht unterstützen, der Polyfill von OddBird geladen.

Leider unterstützt dieser Polyfill nicht die automatische Verknüpfung zwischen dem Button und dem popover, daher müssen die Button eine id haben und die Veknüpfung erfolgt über diese id für jedes button-popover-Paar getrennt.

HTML

Das HTML für ein (Unter-)Menü besteht aus einer Liste mit den Links und einem Button, der diese Liste "öffnet". Für die popover-Technik muss die Liste eine id und das Attribut popover haben. Der Button benötigt die Attribute popovertarget und popovertargetaction. Zusätzlich benötigt der Button z.Zt. noch eine id für die anchor-Technik.

<ul id="level11" popover>
	<li><a href=''>Seite 1.1</a></li>
	<li><a href=''>Seite 1.2</a></li>
	<li><a href=''>Seite 1.3</a></li>
</ul>						
<button id="level11_toggle" popovertarget="level11" popovertargetaction="toggle">Bereich 1</button>

CSS

Die positionierung der (Unter-)Menüs erfolgt relativ zu den button, die sie öffnen. Dazu muss eine Verbindung zwischen der Liste und dem Button hetgestellt werden. In Browsern, die die anchor-Technik unterstützen, erflgt das über die css-Regel position-anchor: auto;. Da aber der Polyfill diese Regel nicht unterstützt, erfolg die Verbindung über folgenden CSS-Code:

#level11_toggle {
	anchor-name: --level11_toggle
}
#level11  {
	position-anchor: --level11_toggle;
}

Die positionierung erfolgt dann über:

position: absolute;
top: anchor(bottom);
left: anchor(left);

bzw.

top: calc(anchor(top) - .5em);
left: calc(anchor(right) + .4em);