Pure CSS: Accessible responsive nav

[beatovich]

hallo

Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Echt? - Das sollte nicht sein! Vielleicht eine ältere Version online gegangen?!?

Aktueller Desktop Firefox.

Ich muss mit der Maus schon extrem nach unten ausweichen, um das Menu zum Schliessen zu bewegen.

Eine Maus fährt ja gelegentlich über den Bildschirm, ohne Absicht immer etwas öffnen zu wollen. Dem kann man nur mit einer transition-Verzögerung begegnen.

übrigens die heise Seite hat da einen ähnlich unangenehmen Menu-Layer und der dafür intendierte Button schliesst nicht, weil ich keine Lust hatte herauszufinden, welches der Scripte jetzt dafür eine Freischaltung braucht.

Praktisch würde ich es vorziehen, auf die Unternavigation in dem Fall bei nojs ganz zu verzichten, und diese erst mit JS zu ergänzen.

Mit welchem Vorteil?

Skalierbarkeit! Na ich korrigiere mal, ich würde auf die eigentlich redundante Unternavigation in dem Fall verzichten.

Du hast deine Navigation mit gerade jener Anzahl Unterpunkte geplant, die gerade noch funktionieren. Es ist aber ärgerlich, wenn jetzt eine Seite viele aber kurze Kapitel erhält.

Der primäre Zweck von Untermenus ist die Möglichkeit, mehr Links anzubieten, als permanent sichtar sein können. Um die Skalierbarkeit hier weiterzuführen, müsste hier eine Navigation auch mit 2nd-level Untermenus umgehen können.

Um eine Skalierbarkeit zu erreichen, verwendet man entweder Popup-Boxen oder man beitet eine scrollbare Liste an.

Besonders muss man aber auch eine Freifläche für das Zuklappen von Navigationen bereitstellen (falls es dazu nicht einen expliziten Button gibt).

Die gibt es. Ich überlege noch, ob ich dazu ein „x“ einblende. Das funktioniert aber noch nicht bei Touch-Geräten.

Wenn dein x ein <label> ist, das den Focus aus dem Navigationsbereich verschiebt, könnte das gehen.