Navigation von Codepen ist meine Meinung nach Fehlehaft

[Mick62]

Dort habe ich ein für mich schöne Navbar gefunden, doch nach der responsiven Ansicht, die mir auch gefällt, ist das Menue, beim vergrößern bis auf das Logo leer. Ist hier jemand der den Fehler im CSS bzw. Java-Script erkennt und mir verrät?

https://codepen.io/KevinohKelvin/pen/MMQGOj

[Gunnar Bittersmann]

@@Mick62

ist das Menue, beim vergrößern bis auf das Logo leer.

Kann ich nicht nachvollziehen. Was genau meinst du?

Ist hier jemand der den Fehler im CSS bzw. Java-Script erkennt und mir verrät?

https://codepen.io/KevinohKelvin/pen/MMQGOj

Ja, das Ding ist fehlerhaft – aber aus einem anderen Grund als du denkst. Das Ding ist unbedienbar: Per Tastatur kann man das Hamburger-Menü nicht öffnen.

Das wurde ein grundlegender Fehler begangen: ein nicht-interaktives Element (div) als Target für ein click-Event verwendet. divs kann man mit der Tastatur aber nicht anclicken; das muss ein button sein!

Am besten einer, der den Zustand des von ihm kontrollierten Dingens per aria-expanded anzeigt: Hamburger menu.

In Verbindung mit initial vollständig sichtbarem Menü auf größeren Viewports: responsive menu.

Wenn du den „Backlinks“ folgst, kommst du zu den Erklärungen hier im Forum.

Kwakoni Yiquan

[Felix Riesterer]

Lieber Gunnar,

Hamburger menu.

warum hast Du bei diesem Codepen das <ul> in einem <div> eingewickelt? Nur, um die Animation damit besser umsetzen zu können? Das <div> gruppiert nämlich nichts, außer dem <ul> als einzigem Kindelement. Könnte man das <div> also auch ganz weg lassen?

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Hamburger menu.

warum hast Du bei diesem Codepen das <ul> in einem <div> eingewickelt?

Hm, weiß nicht.

Könnte man das <div> also auch ganz weg lassen?

Sieht so aus.

Nun könnte man noch die Regeln für #nav-collapsible und nav ul zusammenfassen; ist ja jetzt dasselbe Element.

Was da noch fehlt: bei Tastaturbedienung entweder focus trap oder das Menü sollte automatisch schließen, wenn man raustabbt.

Kwakoni Yiquan

[Mick62]

Danke für gute und verständliche Erklärung.

Das hat mir die Augen geöffnet.