CSS Navbar ok oder gehts übersichtlicher?
bearbeitet von
@@JJ
> > Besser umgesetzt: [Menü](https://codepen.io/gunnarbittersmann/pen/LaNJzX)
> >
> > Genauso aussieht kriegst du mit Änderungen im CSS hin.
> >
>
> Sieht komplett anders aus als das von mir vorgestellte.
Deshalb sagte ich ja, dass man das mit Änderungen im CSS so hinkriegt, wie du es dir vorgestellt hast.
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.](https://codepen.io/gunnarbittersmann/pen/ZEMbzEL)
> 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.
---
Bei den unteren Beispielen mit JavaScript fehlt übrigens noch was:
- Das Untermenü sollte sich beim Verlassen schließen
- Das Untermenü sollte sich per Esc-Taste schließen
(Und die Liste hat keinen Anspruch auf Vollständigkeit.)
🖖 Живіть довго і процвітайте
{:@uk}
--
*„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“*
— @Grantscheam auf Twitter
CSS Navbar ok oder gehts übersichtlicher?
bearbeitet von
@@JJ
> > Besser umgesetzt: [Menü](https://codepen.io/gunnarbittersmann/pen/LaNJzX)
> >
> > Genauso aussieht kriegst du mit Änderungen im CSS hin.
> >
>
> Sieht komplett anders aus als das von mir vorgestellte.
Deshalb sagte ich ja, dass man das mit Änderungen im CSS so hinkriegt, wie du es dir vorgestellt hast.
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.](https://codepen.io/gunnarbittersmann/pen/ZEMbzEL)
> 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.
🖖 Живіть довго і процвітайте
{:@uk}
--
*„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“*
— @Grantscheam auf Twitter