Pure CSS: Accessible responsive nav

[beatovich]

hallo

War nicht leicht zu verfolgen, wo's happert.

Da sich das ganz auf dem mobile wie ein Accordeon verhält, füllt dieses den ganzen Viewport. Wie kann man da eine Sektion schliessen? Man muss auf den deakivierten Link der den aria-page=current entspricht nochmal klicken. So was muss man aber erst rausfinden.

P.P.S.: Hast du dich schon für eine Lizenz entschieden? Wenn ich einen Vorschlag machen dürfte, würde ich eine liberale Lizenz empfehlen. Beispielsweise die MIT-Lizenz oder es alternativ gar unter Public Domain (CC0 als Lizenz) stellen. Bei letzterer kann man so etwas bedenkenlos kopieren und in eigene Software einbetten, was ja vielleicht in deinem Sinne sein könnte.

Ich weiss nicht, was ich von dem Lizenzunwesen halten soll. Weder soll der Code kopiert werden, noch geht's darum ihn zu zitieren. Es ist ja lediglich Technik-Demo und zudem noch nicht mal eine, die man bedenkenlos anwenden kann.

Zur Demo

Ich bin sicher, man kann diese Demo noch besser (= als real world applikation überzeugender) ausarbeiten. Die entscheidende Frage ist ja die, würde der Verfasser selbst diese Demo anwenden? Und ja, der muss sich jeder Autor stellen, weil JS einfach nicht immer verfügbar ist.

Beim gezeigten Verhalten habe ich da meine Zweifel. Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Dass sich permanent der Bildschirm bewegt und verschiebt ist ein anderes grosses Manko.

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.

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

Aber das zeigt ja nur, wie schwierig das Thema ist.

Selbst meine nav hat Mängel wenn man berücksichtigt, dass focus-within oder details (bei no-js spielen polyfills keine rolle) bei einigen Browsern gar nicht implementiert ist.

Ich bin auf die nächste Iteration zum Thema gespannt.