@@Maximillian > ich habe 2 Navigationen je ein Div Das sollten [`nav`-Elemente](https://developer.mozilla.org/docs/Web/HTML/Element/nav) sein. > wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr. Kann ich nicht nachvollziehen. Link zur Seite? Dein HTML weist außer dem bereits genannten noch weitere Fehler auf: Die [`meta viewport`-Angabe](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen) fehlt. > ~~~ HTML, bad > <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links --> > <a href="javascript:void(0);" class="icon" onclick="myFunction()"> > <i class="fa fa-bars"></i> > </a> > ~~~ `href="javascript:void(0);"`{:.bad} ist ein sicheres Indiz dafür, dass das `a`-Element falsch ist. Links führen zu einem Ziel: einer anderen Seite bzw. einem anderen Bereich auf der aktuellen Seite. Für **Aktionen** auf der Seite (z.B. Auf-/Zuklappen von Inhalten) sind `button`s zu verwenden. Außerdem muss jedes interaktive Element eine **Beschriftung** (Text) haben. Deins hat keinen Inhalt; „Menü“ wäre hier angebraxcht. Evtl. kannst du die Beschriftung [visuell verstecken](https://a11yproject.com/posts/how-to-hide-content/); aber sie muss vohanden sein – für Nutzer, die deine Seite nicht visuell wahrnehmen. > ~~~js > function myFunction() { > var x = document.getElementById("myLinks"); > if (x.style.display === "block") { > x.style.display = "none"; > } else { > x.style.display = "block"; > } > } > ~~~ Es ist nicht sinnvoll, dass Element `myLinks` bei jedem Aufruf der Eventhandlerfunktion erneut im DOM zu suchen. Das tut man besser einmalig, also außerhalb der Funktion. Mal abgesehen davon, dass du hier den [bedingten Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) hättest verwenden können, ist es grundsätzlich nicht besonders gut, Stileigenschaften direkt mit JavaScript zu ändern. (Das ist allerdings „[schwer…in die Köpfe der Menschen zu bringen](http://forum.selfhtml.org/self/2010/may/19/linkfarbe-mit-onclick-hin-und-her-schalten/1448610#m1448610)“.) Statt `style.display` zu ändern, bietet es sich an, das [`hidden`-Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) zu setzen bzw. zu löschen. Außerdem kann mit einem ARIA-Attribut `aria-expanded` der jeweilige Zustand des [Toggle-Buttons](https://inclusive-components.design/toggle-button) angezeigt werden. Das alles kannst du dir in [diesem Codepen](https://codepen.io/gunnarbittersmann/pen/LaNJzX) ansehen, mit Erklärungen darin. Und hier habe ich noch ein [responsives Menü](https://codepen.io/gunnarbittersmann/pen/jYaRJM), wo die Links nicht gedoppelt werden. [Erklärung dazu](https://forum.selfhtml.org/self/2016/dec/27/bitte-um-kritik-und-verbesserungen/1683760#m1683760). 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. ([@Grantscheam](https://twitter.com/Grantscheam/status/1247046064504537092))

@@Maximillian > ich habe 2 Navigationen je ein Div Das sollten [`nav`-Elemente](https://developer.mozilla.org/docs/Web/HTML/Element/nav) sein. > wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr. Kann ich nicht nachvollziehen. Link zur Seite? Dein HTML weist außer dem bereits genannten noch weitere Fehler auf: Die [`meta viewport`-Angabe](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen) fehlt. > ~~~ HTML, bad > <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links --> > <a href="javascript:void(0);" class="icon" onclick="myFunction()"> > <i class="fa fa-bars"></i> > </a> > ~~~ `href="javascript:void(0);"`{:.bad} ist ein sicheres Indiz dafür, dass das `a`-Element falsch ist. Links führen zu einem Ziel: einer anderen Seite bzw. einem anderen Bereich auf der aktuellen Seite. Für **Aktionen** auf der Seite (z.B. Auf-/Zuklappen von Inhalten) sind `button`s zu verwenden. Außerdem muss jedes interaktive Element eine **Beschriftung** (Text) haben. Deins hat keinen Inhalt; „Menü“ wäre hier angebraxcht. Evtl. kannst du die Beschriftung [visuell verstecken](https://a11yproject.com/posts/how-to-hide-content/); aber sie muss vohanden sein – für Nutzer, die deine Seite nicht visuell wahrnehmen. > ~~~js > function myFunction() { > var x = document.getElementById("myLinks"); > if (x.style.display === "block") { > x.style.display = "none"; > } else { > x.style.display = "block"; > } > } > ~~~ Es ist nicht sinnvoll, dass Element `myLinks` bei jedem Aufruf der Eventhandlerfunktion erneut im DOM zu suchen. Das tut man besser einmalig, also außerhalb der Funktion. Mal abgesehen davon, dass du hier den [bedingten Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) hättest verwenden können, ist es grundsätzlich nicht besonders gut, Stileigenschaften direkt mit JavaScript zu ändern. (Das ist allerdings [schwer…in die Köpfe der Menschen zu bringen](http://forum.selfhtml.org/self/2010/may/19/linkfarbe-mit-onclick-hin-und-her-schalten/1448610#m1448610).) Statt `style.display` zu ändern, bietet es sich an, das [`hidden`-Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) zu setzen bzw. zu löschen. Außerdem kann mit einem ARIA-Attribut `aria-expanded` der jeweilige Zustand des [Toggle-Buttons](https://inclusive-components.design/toggle-button) angezeigt werden. Das alles kannst du dir in [diesem Codepen](https://codepen.io/gunnarbittersmann/pen/LaNJzX) ansehen, mit Erklärungen darin. Und hier habe ich noch ein [responsives Menü](https://codepen.io/gunnarbittersmann/pen/jYaRJM), wo die Links nicht gedoppelt werden. [Erklärung dazu](https://forum.selfhtml.org/self/2016/dec/27/bitte-um-kritik-und-verbesserungen/1683760#m1683760). 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. ([@Grantscheam](https://twitter.com/Grantscheam/status/1247046064504537092))