@@LK > Nun würde ich gerne das Menü ein- und ausblenden können. Ein beispiel ist hier zu sehen: <http://www.web-toolbox.net/webtoolbox/index.html#home> Daran sollte man sich kein Beispiel nehemn. Und wenn, dann ein schlechtes: **So nicht machen!** Zunächst einmal: Bei breiten Viewports (Desktop, Laptop, Tablet) ist genügend Platz vorhanden. Warum sollte das Menü dann überhaupt ausgeblendet werden? Das Hamburger-Icon mag einigen verständlich sein, anderen aber nicht. Es sollte zusätzlich mit „Menü“ beschriftet sein. Die Seite ist mit der Tastatur **nicht bedienbar**. Zum einen wegen `a:hover, a:focus { outline: 0 }`{: .language-css.bad}. Man erkennt beim Durchschalten mit der Tab-Taste überhaupt nicht, wo man sich gerade befindet. **Merke:** **Niemals `outline` für `:focus` entfernen**, wenn man nicht stattdessen eine andere Kennzeichnung vorsieht. Zum anderen wegen `<i class="icon-reorder"></i>`{: .language-html.bad}. Dass das [`i`-Element](https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/i) eine bestimmte Bedeutung hat (die nicht „Icon“ ist), es hier also missbräuchlich verwendet wird, ist da noch eine Lappalie. Schwerwiegender ist, dass es keinen Inhalt hat. Da sollte „Menü“ drinstehen. Was man [visuell verstecken](http://a11yproject.com/posts/how-to-hide-content/) könnte. Aber – wie gesagt – hier nicht sollte. Und ganz schwer wiegt, dass `i` kein interaktives Element ist (und es unsinnig wäre, es zu einem zu machen). Es ist bei Tastaturbedienung mit der Tab-Taste nicht erreichbar; man kann das Menü nicht aufklappen. **Merke:** **Niemals nicht-interaktive Elemente als Target für `click`-Events vorsehen.** Für sowas sind `button`s zu verwenden. Vor einiger Zeit hatte ich mal [solch ein Menü erklärt](https://forum.selfhtml.org/self/2016/dec/27/bitte-um-kritik-und-verbesserungen/1683760#m1683760) und es gerade eben [in diesem Thread verbessert](https://forum.selfhtml.org/self/2017/jul/21/css-kniffliges-zum-wochenende/1699674#m1699674). Das [vorläufige Ergebnis sieht so aus.](https://codepen.io/gunnarbittersmann/pen/NvKBjp) Hier geht das Menü von oben auf, nicht von der Seite. Aber das ließe sich mit einigen Änderungen im CSS auch hinbekommen. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@LK > Nun würde ich gerne das Menü ein- und ausblenden können. Ein beispiel ist hier zu sehen: <http://www.web-toolbox.net/webtoolbox/index.html#home> Daran sollte man sich kein Beispiel nehemn. Und wenn, dann ein schlechtes: **So nicht machen!** Zunächst einmal: Bei breiten Viewports (Desktop, Laptop, Tablet) ist genügend Platz vorhanden. Warum sollte das Menü dann überhaupt ausgeblendet werden? Das Hamburger-Icon mag einigen verständlich sein, anderen aber nicht. Es sollte zusätzlich mit „Menü“ beschriftet sein. Die Seite ist mit der Tastatur **nicht bedienbar**. Zum einen wegen `a:hover, a:focus { outline: 0 }`{: .language-css.bad}. Man erkennt beim Durchschalten mit der Tab-Taste überhaupt nicht, wo man sich gerade befindet. **Merke:** **Niemals `outline` für `:focus` entfernen**, wenn man nicht stattdessen eine andere Kennzeichnung vorsieht. Zum anderen wegen `<i class="icon-reorder"></i>`{: .language-html.bad}. Dass das [`i`-Element](https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/i) eine bestimmte Bedeutung hat (die nicht „Icon“ ist), es hier also missbräuchlich verwendet wird, ist da noch eine Lappalie. Schwerwiegender ist, dass es keinen Inhalt hat. Da sollte „Menü“ drinstehen. Was man [visuell verstecken](http://a11yproject.com/posts/how-to-hide-content/) könnte. Aber – wie gesagt – hier nicht sollte. Und ganz schwer wiegt, dass `i` kein interaktives Element ist (und es unsinnig wäre, es zu einem zu machen). Es ist bei Tastaturbedienung mit der Tab-Taste nicht erreichbar; man kann das Menuu nicht aufklappen. **Merke:** **Niemals nicht-interaktive Elemente als Target für `click`-Events vorsehen.** Für sowas sind `button`s zu verwenden. Vor einiger Zeit hatte ich mal [solch ein Menü erklärt](https://forum.selfhtml.org/self/2016/dec/27/bitte-um-kritik-und-verbesserungen/1683760#m1683760) und es gerade eben [in diesem Thread verbessert](https://forum.selfhtml.org/self/2017/jul/21/css-kniffliges-zum-wochenende/1699674#m1699674). Das [vorläufige Ergebnis sieht so aus.](https://codepen.io/gunnarbittersmann/pen/NvKBjp) Hier geht das Menü von oben auf, nicht von der Seite. Aber das ließe sich mit einigen Änderungen im CSS auch hinbekommen. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)