Responsive Flexbox-Layouts für Fortgeschrittene

Die etwas andere Dropdown-Navigation 3: Gestaltung per Flexbox

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Dropdown-Navigation wird horizontal ausgerichtet und mit wenigen CSS-Regeln per Flexbox gestaltet.

Transkript

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 hier hat sich sonst nichts geändert. Dann geht aber jetzt auch ein neuer Wert wie "space-between" natürlich und zurück und jetzt werden die Menüpunkte verteilt, aber Sie sehen, die anklickbare Fläche ist noch nicht hier auf volle Breite ausgelegt, das ist noch sehr schmal und dazu kann man jetzt für die Listenelemente direkt dadrunter sagen: "flex: 1 0 auto;", das heißt also für die Flex-Items, für die Listenelemente, ihr dürft wachsen, ihr dürft nicht shrinken -- nicht schrumpfen auf Deutsch -- und die Ausgangsgröße orientiert sich am Inhalt; speichern, rüber und jetzt sieht man schon ein klein bisschen, das hat sich geändert, jetzt haben wir gleichgroße Menüpunkte hier, aber wenn ich jetzt die Listenpunkte rausklappe, dann sehen Sie, die orientieren sich hier am Inhalt und nicht an der Breite des ersten Elementes hier oben, aber auch das kann man mit Flexbox natürlich sofort ändern; und zwar am einfachsten, indem man hier für die zweite Ebene zur Liste geht, die hat die Klasse ".toggled-on", wenn sie herausgeklappt ist und im Moment steht dort "display: block;", damit das "display: none;" hier oben überschrieben wird und damit die dann wieder sichtbar wird. Wenn wir jetzt einfach das "display: block;" in "display: flex;" ändern, dann speichern und neu laden, dann sehen Sie jetzt beim Herausklappen, die untere Liste orientiert sich an der oberen Liste hier oben, die sind gleich breit. Jetzt gibt es eigentlich nur noch ein kleines Detailproblem, wenn ich hier auf "Untersuchen" klicke und eine Liste mal herausklappe und man sieht das jetzt schon ein bisschen, wenn das kleiner wird, dann wird hier unten nicht umgebrochen. da gibt es keinen Umbruch und das liegt daran, dass die Listenelemente auf der zweiten Ebene momentan gestaltet werden hier durch die erste: "flex: 1 0 auto;", das heißt, die dürfen nicht schrumpfen, das heißt, die dürfen nicht kleiner werden und das wollen wir eben noch ändern hier im CSS Dazu selektiert man in der Unterliste "ul" die Listenelemente für die zweite Ebene und dort sagt man dann ganz einfach: "flex: 1", also ihr dürft wachsen, genau wie vorher, ihr dürft aber auch shrinken, noch eine "1", "flex-shrink", ihr dürft schrumpfen und "auto" bleibt. Das heißt, hier wird gegenüber der oberen Einstellung für die erste Ebene, hier wird jetzt gesagt, ihr dürft auch schrumpfen, falls kein Platz vorhanden ist; gespeichert ist, einmal neu laden und herausklappen und man sieht jetzt schon, jetzt gibt es hier einen Umbruch, denn die Listenelemente dürfen kleiner werden. Damit hat man mit wenigen Flexbox-Eigenschaften und Werten hier eine wirklich wunderbare Dropdown-Liste, die einfach gestaltet werden kann.

Responsive Flexbox-Layouts für Fortgeschrittene

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...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016
Laufzeit:2 Std. 25 min (34 Videos)

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!