Gunnar Bittersmann: Die Media-Queries bringen mich zum Heulen...

Beitrag lesen

@@MichaelS

um einen kleinen Button ( keinen Hamburger) als "Menü", zu erstellen, der das Menü ausplappt. Die Box, bzw. das Menü kann ich mit :target ansprechen. […]
Keine Ahnung ob das funktioniert

Rolf sagte doch schon, dass das nicht funktioniert. „aufklappende Menüs, und die sind bekanntlich ohne JavaScript kaum bedienbar lösbar.“

aber so ist der Plan.

Kein guter Plan.

Besserer Plan: responsives Menü. Mit button innerhalb(!) des nav-Elements.

Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.

Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.

Das Menü verschwindet per [aria-expanded="false"] + ul { display: none } (prinzipiell; im verlinkten Codepen ist es geringfügig anders gemacht).

Weiterhin muss man dafür sorgen, dass das Menü beim Drücken der Esc-Taste schließt.

Wenn das Menü nicht wie in diesem Beispiel den Seiteninhalt nach unten schiebt, sondern sich über ihn legt, muss außerdem noch dafür gesorgt werden, dass sich das Menü schließt, wenn mit der Maus außerhalb geclickt wird oder bei Tastatursteuerung der Fokus aus dem Menü herauswandert.

Bin zufällig gerade wieder dabei, ein solches Menü umzusetzten …

😷 LLAP

--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner