CSS Navbar ok oder gehts übersichtlicher?

[JJ]

Hallo Gunnar,

recht herzlichen Dank für Deinen neuen Link, mit dem kann ich schon viel mehr anfangen. Bin aber ehrlich, ich hätte das von vertikal auf horizontal nicht selber geschafft. Nun aber kann ich damit arbeiten. 👍

Damit sich die Position des Untermenüs nicht auf den jeweiligen Hauptmenüpunkt bezieht, sondern auf das nav-Element (d.h. damit es ganz links steht), muss position: relative bei nav li { … } weg und in den nav { … }-Block rein.

Damit die Punkte im Untermenü nicht untereinander, sondern nebeneinander stehen, ist zu dessen Anzeige nicht display: block, sondern display: flex zu setzen.

Und damit das Untermenü über die volle Breite geht, ist bei nav ul ul { … } noch right: 0 zu ergänzen.

☞ Fertig.

Klasse.
Habe sofort angefangen, es umzusetzen.
Ehrlich gesagt, gefällt mir persönlich Option 1 am besten.
Wäre klasse, wenn Du (natürlich auch gerne alle anderen) mal nen Blick auf meine Umsetzung werfen könntest.

der CSS-Teil verwirrt mich eher und ich verstehe ihn nicht.

Damit kann man nicht viel anfangen. Wenn du konkrete Fragen hat, kann man darauf eingehen. Auf ein pauschales „verstehe ihn nicht“ kann man nur mit Achselzucken antworten.

Da hast Du natürlich recht.
Gestern hatte ich so gar keinen Ansatz. Nachdem ich heute früh Matthias überarbeiteten Artikel gelesen und dann Dein neues Beispiel studiert habe, sieht das schon ganz anders aus. Und es ist mir auch gelungen, Dein Beispiel anzupassen, die für mich nicht wichtigen Elemente heraus zu nehmen und sogar Custom Property zu verwenden (aus dem Artikel gelernt).

Trotzdem bin ich nicht so ganz glücklich mit der Ergebnis, obwohl es in meinen Augen sehr schön aussieht. Ich versuch mal zu erklären, was mir da fehlt oder was ich einfach schön fände. Eigentlich sinds ein paar "nice to haves" und nur ein wirklicher Punkt, der mir die Verwendung des bisherigen Standes nicht möglich machen würde (Punkt2)

1. Nice to have: Fände ich schön, wenn die das rechte Ende der Subnavigation immer mit dem rechten Ende des "gehoverten" Link der Hauptnavigation endet, es sei (natürlich) denn, dass das rechte Ende der Subnavigation ohnehin über das rechte Ende des "gehoverten" Links der Hauptnavigation hinaus ragt.
   Ich hoffe, das ist verständlich. Falls nicht, wirf mal einen Hover-Blick auf "Contact" in meinem Beispiel. Dort wäre schöpn, wenn man nicht wieder ganz nach Links müsste, um einen der 3 Unterlinks zu klicken.

2. Must have: Was aber viel schlimmer ist: Wenn Du den Viewport sehr viel verschmalerst, so dass meine Links der Hauptnavigation auf 2 oder gar 3 Reihen untereinander wechseln, hast Du keine Chance mehr, die Subnavigation anzusteuern (jedenfalls mit Maus oder Touch). Denn wenn Du vom Hover-Link irgendwo anders hin gehst, als auf die Subnavigation, verschwindet diese sofort wieder. Da sich die Subnavigation aber dann in Reihe 3 oder 4 befindet, kannst Du nicht ohne Umweg (über die weiteren reihen der Hauptnavigation) dorthin gelangen. Hier wäre schöner, wenn die Subnavigation immer die (weiteren Reihen der) Hauptnavigation überblendet. Ich habe versucht, mit dem z-index zu spielen, habe das aber nicht hin bekommen.

3. Nice to have: Was schön wäre, weil in der Praxis oft nervend: Wenn man versehentlich die Hauptnavigation streift (passiert in meiner Anwendung oft), wäre cool, wenn die Subnavigation nicht sofort reagiert, sondern eine Verzögerung von z.b. einer Sekunde eingebaut wäre. Dann würde sie nicht jedesmal hinein "flattern", wenn mans gar nicht will.

4. Luxus wäre dann, wenn die Subnavigation etwas smooth hinein und hinaus fährt, aber das ist natürlich alles andere als nötig und auch fraglich, ob ohne JS hier möglich.

Nochmal danke für Deine Hilfe.

JJ