Version 2 mit Flex

[Gunnar Bittersmann]

@@LiveAndSmile

die Navigation von https://www.paciellogroup.com/ gefällt mir sehr gut auch wie sich das Icon wechselt. Allerdings weiß ich nicht wie dieses umgesetzt ist.

Ich hab das mal fix nachgebaut (und zwar ohne den ganzen Müll, den Bootcrap da mit reinschleppt).

Der Clou daran ist eigentlich nur der Button, der die Sichtbarkeit der Hauptnavigation steuert (und der deshalb das ARIA-Attribut aria-controls="main-nav" trägt). Der macht beim Anclicken nichts weiter als sein eigenes aria-expanded-Attribut umzuschalten, welches angibt, ob die Hauptnavigation zugeklappt oder offen ist. (Damit das Ganze auch ohne JavaScript bedienbar ist, ist die Hauptnavigation initial offen und wird erst mit JavaScript zugeklappt.)

Je nach Wert des aria-expanded-Attributs wird per CSS ein anderes Symbol im Button angezeigt. Das tatsächliche Ein- und Ausblenden der Hauptnavigation geschieht auch per CSS (Geschwisternselektor).

Aber das nur bei schmalen Viewports. Bei breiten Viewports ist die Navigation immer zu sehen (die Menüpunkte sind dann nebeneinander angeordnet); dafür ist der Button dann ausgeblendet.

Das ganze ist natürlich barrierefrei, also auch per Tastatur bedienbar. Damit erkennbar ist, welches Element gerade den Fokus hat, ist dieses genauso wie beim Hovern hervorgehoben. (:focus und :hover treten zusammen auf.)

Desweiteren gibt es noch einen Navigation-überspringen-Link zum Hauptinhalt.

Kennst du zufällig ein deutsches Tutorial wo erklärt wie, wie ich so eine Navigation umsetzten kann?

War das Tutorial genug?

LLAP 🖖