Menü ein-, ausblenden

[Gunnar Bittersmann]

@@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 }. 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>. Dass das i-Element 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 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 buttons zu verwenden.

Vor einiger Zeit hatte ich mal solch ein Menü erklärt und es gerade eben in diesem Thread verbessert. Das vorläufige Ergebnis sieht so aus.

Hier geht das Menü von oben auf, nicht von der Seite. Aber das ließe sich mit einigen Änderungen im CSS auch hinbekommen.

LLAP 🖖