@@LiveAndSmile > die Navigation von [https://www.paciellogroup.com/](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](http://codepen.io/gunnarbittersmann/pen/MJYeod/left) (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 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe

@@LiveAndSmile > die Navigation von [https://www.paciellogroup.com/](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](http://codepen.io/gunnarbittersmann/pen/MJYeod/left) (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 auch ohne JavaScript bedienbar ist, ist die Hauptnavigation initial offen und wird erst mit JavaScript zugeklappt.) Das tatsächliche Ein- und Ausblenden geschieht 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 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe