Pure CSS: Accessible responsive nav

[marctrix]

Hej beatovich,

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.

Also bei mir öffnen sich nur Boxen, die man auch hovert. Das Verhalten kann ich nciht nachvollziehen.

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

Ja, damit sich die Inhalte nicht dauernd hoch und runter bewegen, sondern nur einmal beim Öffnen des Menüs. Dann klickt man auf die Seite, wo man hinwill und gut ist. wenn man gar keinen Link öffnen möchte, muss man diese Fläche tatsächlich wieder verlassen oder anklicken.

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.

Könnte man machen, aber dann müsste man warten. Und wie lange? Und dann passiert etwas, ohne dass man wissentlich etwas ausgelöst hat? - Finde ich problematisch…

ü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.

Bei einem JS-freien Menü hat man dieses Problem ja nicht… 😉

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.

Ach so. Ja die könnte man dann per Js ausblenden. Aber das wäre ein ganz anderes Konzept.

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.

Die Liste mit den Kapiteln (oder Unterseiten) lässt sich ja verschachteln. In der Hauptnavigation sind mehr als zwei Ebenen kontraproduktiv.

Die müssen dann irgendwohin aufgehen (meist links oder rechts) und das abhängig davon, wo sie sich befinden (am linken Bildschirmrand ist links kein Platz, am rechten Bildschirmrand ist rechts kein Platz). Alles sehr unschön, würde ich daher nicht machen.

Das ist einer (von mehreren Gründen), warum ich die Struktur ab der zweiten Ebene gerne außerhalb einer verschwindenden Navbar anzeige.

Weitere sind:

Übernahme der Breadcrumb-Funktion, Darstellung weiterer Informationen, also außer, woher komme ich (Breadcrumb), wo bin ich (Hervorhebung der aktuellen Seite, was gibt es auf gleicher Ebene (benachbarte Themen), was gehört zu dem ausgewählten Bereich noch (mögliche Unterpunkte einer tieferen Ebene).

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

Das kann ich mir nicht vorstellen. Hast du ein Beispiel?

Klingt aber auch ganz danach, als ob du hier ein ganz anderes Konzept bevorzugen würdest. Was ich gut heiße. Mir geht der derzeitige Einheitsbrei mächtig auf den Keks.

Ob das an den zimmergleichen Frameworks liegt? — Kreativ ist jedenfalls anders.

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.

Na ja gehen tut es ja schon, man muss irgendwo auf den Hintergrund klicken, dann geht das Menü zu. Außerhalb eines Bedienelemente zu klicken macht so etwas ganz häufig. Aber dennoch weiß das natürlich cniht jeder, daher die Idee ein "x" irgendwo zu platzieren. Man kann zwar aber auch überall sonst klicken, aber das würd es noch mal deutlich machen. Was ich schade fände, dass menschen, die ohne das "x" einfach mal versuchen würden irgendwohin zu klicken, werden dann vermutlich auch versuchen, das "x" zu treffen, was ja eigentlich unnötiger Aufwand ist. Keine Ahnung, wie ich aus diesem Dilemma komme.

label Ja, aber das verstehen Screenreader nicht. Vor denen allerdings könnte man es verstecken. Ich hatte an einen seiteninternen Link gedacht. So oder so muss ich sehen, wie ich den Link oder das label nach dem Klick wieder loswerde…

Auf jeden Fall einen Gedanken wert. Danke!

Derzeit tendiere ich noch dazu, es so zu lassen, wie es ist, d.h. man muss entweder von der Fläche runter mit der Maus oder eben irgendwo in die Fläche klicken… Vielleicht würde ich es auch Anwendern überlassen ein "x" irgendwo anzuzeigen und diese Frage einfach in der Kurz-Doku ansprechen.

Marc