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.

Erweiterte Navigation 3: Das Menü selbst gestalten

Erweiterte Navigation 3: Das Menü selbst gestalten – Tutorial zu CSS

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

Gratismonat starten Für Ihr Team erwerben

Erweiterte Navigation 3: Das Menü selbst gestalten

“

Die erweiterte Navigation ist soweit hier bereits vorbereitet, die Icons sind groß, das erste Wort steht daneben, ebenfalls groß und der Rest des Satzes steht klein darunter. Was jetzt noch fehlt, ist, dass diese Menüpunkte nebeneinander stehen und umbrechen, falls zu wenig Platz ist. Auch das geschieht natürlich per Flexbox. Hier sind wir in "nav-advanced.css". Das ist die Gestaltung für die Menüpunkte selbst und hier unten drunter, ich schreibe das noch mal oben drüber: "Menüpunkte gestalten" und jetzt kommt unten drunter: "Menü selbst gestalten". Und los geht es hier mit einer "media query", denn die Methodik ist eigentlich genau dieselbe wie bei der einfachen Navigation: "@media screen and (min-width: 30em) {" und dann geht es los. Hier etwas weiter unten wird die [geschweifte] Klammer geschlossen, so und hier geht es jetzt los. Als erstes wird hier die umgebende Liste wieder zu einem flex-container, das bedeutet also ".advanced nav ul {" und die wird zu einem flex-container:…

Inhalt