Untermenu aufklappen - Anfängerfrage

[marctrix]

Hej Gunnar,

@@Gerhard1

was habe ich bei folgendem falsch gemacht?

Worauf Marc schon hinwies: Dein Markup ist fehlerhaft. Der Markup Checker spürt solche Fehler auf; visuelle Tests sind dafür auch ein gutes Werkzeug.

Das Untermenu ist nicht unsichtbar.

Und das bleibt es auch für alle Nutzer, die im Web anders navigieren sind als mit einer Maus (o.ä. Zeigergerät).

Persönlich bin ich ja auch der Meinung, dass display: none nicht die beste Lösung ist.

Ich würde die unteren Menüpunkte nur aus dem Viewport schieben, dann bleiben Sie für Blinde schon mal erreichbar.

So wie man es mit Skiplinks macht.

Allgemein ist es das aber nicht; jedes Menü muss auch mit der Tastatur bedienbar sein.

Full ACK

Una Kravets hat da eine Lösung mit :focus-within vorgestellt.

So weit war ich schon vor Jahren, wenn auch ohne die Möglichkeiten von focus-within. Das ist IMHO gar nicht nötig, denn man sieht ja am aufgeklappten Untermenü, welcher obere Menü-Punkt dazu gehört.

Warum ich eine reine CSS-Lösung aber für ungut halte, erkläre ich unten.

Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den Kommentar von Marcy Sutton.

Probleme gibt es beim schrägen Überfahren um Untermenü-Punkte zu erreichen, wobei (kurzzeitig) das Eltern-li verlassen wird. Hier ist JS nötig um eine kurze Verzögerung zu erreichen, bevor sich das Menü wieder zuklappt. Habe da mit Delay und so romprobiert, das aber mit CSS allein nicht hinbekommen. Vielleicht hatte ich einen schlechten Tag?

Jedenfalls ist nicht die Tastatur-Bedienung die große Herausforderung, wie in dem Artikel behauptet (und dann "gelöst" wird - ist längst gelöst), sondern die Bedienung mit der Maus ist das größere Problem. Das habe ich mi reinem CSS nicht lösen können.

Kannst es ja selber mal probieren, @Gunnar Bittersmann ,denn bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.

Marc