@@Kunst-eyids > Ich blende ein Menu (<nav id="navID>) durch click-Event auf einem A-Tag mit Bild ein oder aus. `<a id="hamburgerLink">`{:.language-html.bad} ist dafür falsch. Ein `a`-Element ohne `href`-Attribut ist kaum mehr als ein `span` – es ist kein interaktives Element; es ist per Tastatur nicht bedienbar. Aber auch mit `href`-Attribut wäre ein `a`-Element falsch. Für Interaktionen auf einer Seite ist das `button`-Element zu verwenden. Den Button kannst du mit CSS so stylen, dass er ~~keinen Rahmen~~ einen transparenten Rahmen[^1] und transparenten Hintergrund hat. [^1]: Rahmen von Buttons nicht entfernen wegen *forced-colors mode*{:@en}. Siehe [Tweet](https://twitter.com/g16n/status/1572852401551380481), Artikel [Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties](https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/){:@en} von Eric Bailey und Vortrag [Practical Styling in Forced Colors Mode](https://www.youtube.com/watch?v=vlx70ABSAP0&list=PLn7dsvRdQEfHjluJsuzNto9PFhAsG3Hwb){:@en} von Mike Herchel Und der Button muss unbedingt mit ins `nav`-Element rein! (Sonst finden ihn Screenreader-Nutzer schlecht.) Das heißt dann, du blendest dann nicht das `nav`-Element ein/aus, sondern das `ul`-Element darin. Zu deinem JavaScript: Das sollte nicht nur das Menü ein- und ausblenden, sondern den Zustand ein- bzw. ausgeblendet auch am Button anzeigen: `aria-expanded="false"` bzw. `"true"`. Screenreader sagen das dann an. Außerdem könntest du das auch nutzen, um bei geöffnetem Menü das Hamburger-Icon durch ein Kreuz × zu ersetzen. > ```js,bad > function menuEinAus(){ > document.getElementById("navID").style.display=(document.getElementById("navID").style.display=="block"?"none":"block"); > } Es macht auch wenig Sinn, das Element „navID“ bei jedem Auf- und Zuklappen erneut im DOM zu suchen. Das sollte einmalig nach dem Laden der Seite geschehen (also außerhalb der Funktion `menuEinAus()`) und in einer Variablen gespeichert werden. Brauchst du aber auch gar nicht, wenn du wie oben gesagt `aria-expanded` verwendest. Dann kast du das dem Button folgende `ul`-Element per CSS ein- und ausblenden: ```css [aria-expanded="false"] + ul { display: none; } ``` Eine weitere Möglichkeit wäre das Ändern des `hidden`-Attributs - wie in [diesem Beispiel](https://codepen.io/gunnarbittersmann/pen/yZrLXJ). Es ist sowieso i.a.R. keine gute Idee, CSS-Eigenschaften direkt mit JavaScript zu ändern. --- Was bei dir auch nicht stimmt, sind die Hierarchie-Ebenen der Überschriften. Nach `h1` muss `h2` kommen, nicht `h6`{:.bad}. (Auch wichtig für Screenreader-Nutzer.) Die Schriftgrößen gibst du per CSS an. --- > Wenn ich den Zurück-Button benutze - oder history.back() - bleibt das Menu im Chrome immer geöffnet. Zu den Eigenarten der Browser beim Zurückgehen kann ich wenig beitragen. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Kunst-eyids > Ich blende ein Menu (<nav id="navID>) durch click-Event auf einem A-Tag mit Bild ein oder aus. `<a id="hamburgerLink">`{:.language-html.bad} ist dafür falsch. Ein `a`-Element ohne `href`-Attribut ist kaum mehr als ein `span` – es ist kein interaktives Element; es ist per Tastatur nicht bedienbar. Aber auch mit `href`-Attribut wäre ein `a`-Element falsch. Für Interaktionen auf einer Seite ist das `button`-Element zu verwenden. Den Button kannst du mit CSS so stylen, dass er ~~keinen Rahmen~~ einen transparenten Rahmen[^1] und transparenten Hintergrund hat. [^1]: Rahmen von Buttons nicht entfernen wegen *forced-colors more*{:@en}. Siehe [Tweet](https://twitter.com/g16n/status/1572852401551380481), Artikel [Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties](https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/){:@en} von Eric Bailey und Vortrag [Practical Styling in Forced Colors Mode](https://www.youtube.com/watch?v=vlx70ABSAP0&list=PLn7dsvRdQEfHjluJsuzNto9PFhAsG3Hwb){:@en} von Mike Herchel Und der Button muss unbedingt mit ins `nav`-Element rein! (Sonst finden ihn Screenreader-Nutzer schlecht.) Das heißt dann, du blendest dann nicht das `nav`-Element ein/aus, sondern das `ul`-Element darin. Zu deinem JavaScript: Das sollte nicht nur das Menü ein- und ausblenden, sondern den Zustand ein- bzw. ausgeblendet auch am Button anzeigen: `aria-expanded="false"` bzw. `"true"`. Screenreader sagen das dann an. Außerdem könntest du das auch nutzen, um bei geöffnetem Menü das Hamburger-Icon durch ein Kreuz × zu ersetzen. > ```js,bad > function menuEinAus(){ > document.getElementById("navID").style.display=(document.getElementById("navID").style.display=="block"?"none":"block"); > } Es macht auch wenig Sinn, das Element „navID“ bei jedem Auf- und Zuklappen erneut im DOM zu suchen. Das sollte einmalig nach dem Laden der Seite geschehen (also außerhalb der Funktion `menuEinAus()`) und in einer Variablen gespeichert werden. Brauchst du aber auch gar nicht, wenn du wie oben gesagt `aria-expanded` verwendest. Dann kast du das dem Button folgende `ul`-Element per CSS ein- und ausblenden: ```css [aria-expanded="false"] + ul { display: none; } ``` Eine weitere Möglichkeit wäre das Ändern des `hidden`-Attributs - wie in [diesem Beispiel](https://codepen.io/gunnarbittersmann/pen/yZrLXJ). Es ist sowieso i.a.R. keine gute Idee, CSS-Eigenschaften direkt mit JavaScript zu ändern. --- Was bei dir auch nicht stimmt, sind die Hierarchie-Ebenen der Überschriften. Nach `h1` muss `h2` kommen, nicht `h6`{:.bad}. (Auch wichtig für Screenreader-Nutzer.) Die Schriftgrößen gibst du per CSS an. --- > Wenn ich den Zurück-Button benutze - oder history.back() - bleibt das Menu im Chrome immer geöffnet. Zu den Eigenarten der Browser beim Zurückgehen kann ich wenig beitragen. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix