Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

Erweiterte Navigation 3: Das Menü selbst gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Menüpunkte werden per Flexbox nebeneinander gestellt und so gestaltet, dass sie bei Platzmangel umbrechen – flexibel und responsiv.

Transkript

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: "display: flex;" diese soll "gewrapt" werden: "flex-wrap: wrap;" und die soll "justify-content: center;" mal zentriert werden. Das ist der erste Schritt und den schauen wie uns einmal kurz im Browser an, neu laden, und die Punkte stehen schon nebeneinander, auch wenn es noch nicht perfekt ist. Jetzt sollen die Listen-Elemente gestaltet werden und dann sehen wir, wie weit wir damit kommen: ".advanced.nav li {" und die sollen wachsen dürfen, nicht schrumpfen, und als Ausgangsgröße, als Wunschgröße "12em" haben: "flex: 10 12 em; }", Das ist also eine Art Mindestbreite und auch nach diesem Schritt, speichern und neu laden. Und Sie sehen, das verteilt sich eigentlich schon so weit ganz ordentlich. Was hier passiert ist, dass die Listen-Elemente, ich zeige das hier einmal im Entwickler-Tool, und hier sind die Listen-Elemente und die bekommen jetzt die Erlaubnis zu wachsen, die dürfen nicht schrumpfen und sollen "12em" sein. Das heißt, der Browser setzt sie auf "12em", wenn da noch Platz ist, dann verbreitert er die so viel, dass das genau passt. Wenn ich jetzt hier das Ganze verkleinere, dann sehen Sie, dass das wunderbar umbricht, denn wenn die Listen-Elemente kleiner werden als "12em", dann wird der Browser da bei gehen und sagen, das passt nicht mehr in eine Zeile, ich breche das um. In diesem Falle ist "flex-wrap" hier wirklich einfach nur gut. Ich beende das und wir haben noch zwei kleine Dinge, die wir korrigieren müssen. Als erstes hier unten sehen Sie hier, geht der Hyperlink über die ganze Höhe, hier noch nicht, bei diesen drei Punkten, weil hier mehr Text ist und der hier umbricht. Das kann man recht einfach beheben und dazu wechsle ich wieder rüber in den Editor. Im HTML wird deutlich, also das Problem ist, dass die Hyperlinks hier nicht die volle Höhe bekommen, beim "hovern" und wenn ich jetzt das "li" auch zu einem "flex-container" mache, dann wird das "A" automatisch die volle Höhe bekommen. Das heißt, ich wechsle hier zu ".advanced-nav li" und sage "display-flex: flex;" für die Listen-Elemente. Speichern und neu laden und Sie sehen jetzt, ist das hier dieselbe Höhe, allerdings nehmen die Hyperlinks hier nicht mehr die volle Breite an und das machen wir mit ganz normalem HTML. Hier oben gibt es ja schon einen Style dafür, und die bekommen einfach gesagt, "width: 100%;" seid so breit wie euer Eltern-Element, und wenn wir das gemacht haben, dann ist hier alles so weit in Ordnung. Volle Höhe und beim Verkleinern des Browserfensters brechen sie um, die Icons stehen neben dem Text und es entspricht genau dem, was wir uns vorgenommen hatten.

CSS: Responsive Flexbox-Layouts für Profis

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!