Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis
Die fünf Navigationen im Überblick – Tutorial zu CSS
Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis
Die fünf Navigationen im Überblick
Ein Bereich, bei dem die Vorteile von Flexbox schnell deutlich werden, ist die Gestaltung von Navigationen und Menüs, so wie hier im Bild zu sehen. Selbst bei einfachen Navigationsleisten, so wie hier in der obersten, ist es mit traditionellen Layoutmethoden manchmal ganz schön nervig, besonders wenn es andere Anforderungen gibt, wie zum Beispiel, dass sie nicht linksbündig sein soll, sondern dass die Navigation zentriert sein soll oder rechtsbündig; oder dass die Elemente gleichmäßig verteilt sein sollen, so wie hier im Bild. Sie sehen mit Flexbox geht das alles relativ einfach durch die Änderung von wenigen Werten. Aber mit traditionellen Methoden ist das manchmal ganz schön aufwendig. Ich möchte Ihnen in diesem Training fünf verschiedene Navigationen zeigen. Hier eine einfache Navigationsleiste, dann eine etwas erweiterte mit Icons und einer Beschreibung, dann mehrere Ebenen, eine Dropdown-Navigation, die etwas anders ist als normalerweise. Sie sehen hier beim "Hovern" passiert gar nichts. Eine Social-Media-Leiste, bei der anstelle von Text hier nur Symbole erscheinen, und zum Abschluss eine gemischte Navigation mit Dropdown- und Social-Media-Leiste in einem direkt nebeneinander. Diese Menüs werden nach und nach erstellt; diese Navigationen. Wenn Sie damit durch sind, zögern Sie nicht, experimentieren Sie mit den hier gezeigten Beispielen und erstellen Sie eigene Lösungen, die für ihre Websites am besten passen.
Üben mit Projektdateien
Laden Sie die Dateien herunter, die von den Trainer:innen verwendet werden. So können Sie mitlesen und durch Ansehen, Zuhören und Üben lernen.
Inhalt
-
-
-
-
Die fünf Navigationen im Überblick1 Min. 38 Sek.
-
(Gesperrt)
Einfache Navigation 1: HTML und Grundformatierung3 Min. 12 Sek.
-
(Gesperrt)
Einfache Navigation 2: Gestalten per Flexbox5 Min. 3 Sek.
-
(Gesperrt)
Einfache Navigation 3: Zeilenumbruch erlauben5 Min. 31 Sek.
-
(Gesperrt)
Erweiterte Navigation 1: HTML und FontAwesome3 Min. 22 Sek.
-
(Gesperrt)
Erweiterte Navigation 2: Icons und Text gestalten4 Min. 9 Sek.
-
(Gesperrt)
Erweiterte Navigation 3: Das Menü selbst gestalten4 Min. 53 Sek.
-
(Gesperrt)
Die etwas andere Dropdown-Navigation 1: Grundprinzip, HTML und CSS4 Min. 50 Sek.
-
(Gesperrt)
Die etwas andere Dropdown-Navigation: 2: JavaScript im Überblick3 Min. 51 Sek.
-
(Gesperrt)
Die etwas andere Dropdown-Navigation 3: Gestaltung per Flexbox5 Min.
-
(Gesperrt)
Social-Media-Leiste gestalten4 Min. 42 Sek.
-
(Gesperrt)
Dropdown-Navigation und Social-Media-Leiste kombinieren5 Min. 11 Sek.
-
-
-
-
-