Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.

Die etwas andere Dropdown-Navigation 3: Gestaltung per Flexbox

Die etwas andere Dropdown-Navigation 3: Gestaltung per Flexbox – Tutorial zu CSS

Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Gratismonat starten Für Ihr Team erwerben

Die etwas andere Dropdown-Navigation 3: Gestaltung per Flexbox

“

Die Gestaltung dieses Dropdown-Menüs mit Flexbox geht eigentlich genau wie immer, es gibt hier die erste Ebene horizontal und dazu geht man im CSS einfach in den Selektor für die Liste. "multi-level-nav" ist die Klasse für das umgebende "nav" und darin die Liste und die wird jetzt zur Flexbox: "display: flex;", dann gleich hinterher: "flex-wrap: wrap;", damit bei Bedarf umgebrochen werden darf und hier noch: "justify-content" auf den Standardwert "flex-start", einfach zur besseren Lesbarkeit und damit man es schneller ändern kann. "flex-start" ist da und einmal neu laden und Sie sehen, das ist schon horizontal und die Listenpunkte klappen auch heraus, das hat ja mit der Flexbox eher nichts zu tun. Jetzt kann man anfangen zu spielen hier, jetzt kann man zum Beispiel "flex-end" sagen, speichern, neu laden, und Sie haben eine rechtsausgerichtete Dropdown-Liste, hier hat sich nichts geändert oder "center" und wie der Name bereits andeutet, wird die Liste daraufhin zentriert hier und auch…

Inhalt