CSS: Responsive Flexbox-Layouts für Profis

Dropdown-Navigation und Social-Media-Leiste kombinieren

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In schönster Modulbauweise werden die Dropdown-Navigation und das Social-Media-Menu kombiniert. Ein div drumherum, ein bisschen Flexbox und schon haben Sie ein funktionierendes "gemischtes Doppel".

Transkript

Ziel ist jetzt, ein gemischtes Menü, ein "Mixed Menu", gemischte Navigation, wie immer sie es nennen wollen, und zwar, links soll das Dropdown sitzen und rechts die Social-Media-Leiste und zwar ohne "float", ohne "position", ohne "display: table", ohne "display: inline-block", nur mit Flexbox, denn Flexbox ist ideal geeignet für solche Unternehmungen, da es keine Auswirkungen hat auf folgende Elemente, im Gegensatz zu "float", zum Beispiel, wo ja gecleared werden muss, um genau das zu verhindern. dass folgende Elemente auch gefloatet werden. Ausgangspunkt für diese Aktion ist das, was Sie hier sehen, nämlich oben das DropDown, da drunter die Social-Media-Leiste, da kommt einfach ein <div drum rum, und dieses <div wird auf "display: flex" gesetzt, und schon stehen die nebeneinander. Im HTML und CSS sieht das Ganze hier so aus: Ich habe einfach die "nav-multilevel-nav" und die "nav-social-menu" untereinander reinkopiert, um das beides herum ein <div gebaut, mit der Klasse "nav-mixed" und das <div hört etwas unterhalb hier wieder auf. Da drin sitzen die beiden "nav"s, einfach reinkopiert. Im CSS die entsprechenden Stylesheets aus den vorherigen Übungen reinkopiert und ein neues erstellt, das noch komplett leer ist, "nav-mixed", was über die "zentrale" eingebunden wird. Also schönste Modulbauweise, einfach die Module in einen Topf, und das funktioniert. Damit man beim Bauen besser nachvollziehen kann, was da eigentlich passiert, möchte ich vorübergehend ein paar "debugging-styles" einbauen und möchte die beiden Module anders einfärben. Es kommt oben die "multi-level-nav ul" und da kommt die Hintergrundfarbe, "darkred" nehmen wir mal, und das Ganze kopieren und noch mal, und dann noch "nav-mixed-social-menu", und da nehmen wir "darkorange". So, zwei unterschiedliche Farben, damit man dann sehen kann, was hier passiert, und im Browser sieht das momentan so aus. Das ist nur vorübergehend, das machen wir nachher wieder weg, damit das alles aussieht, wie aus einem Guss. Im Editor geht es jetzt an die eigentliche Flex-Arbeit, und zwar, geht das mit dem <div los. <div, das hat die klasse "nav-mixed" und dann geht es los mit "display: flex", das kennen Sie bereits, dann kommt "flex-wrap: wrap", damit die beiden umbrechen dürfen. Und "justify-content", und das kommt auf "space-between", damit die beiden Flex-Items an den beiden Enden des Flex-Container sitzen. Blocksatz, auf gut Deutsch. "display: flex; flex-wrap: wrap; justifiy-content: space-between:", gespeichert ist; rüber in den Browser, neu laden und Sie sehen, die beiden stehen nebeneinander. Das ist viel einfacher und hat viel weniger Nebenwirkungen, als alle bisher bekannten Techniken. Einziges Problem, wir haben hier eine Lücke, also brauchen wir noch eine Hintergrundfarbe für den Flex-Container. Das ist altbackenes CSS, "background:" und wir hatten, glaube ich, "hsl(0, 0%, 15%)", so, das war dieser Grauton, und da ist er. Jetzt bleibt uns eigentlich nur noch eins, nämlich das Auskommentieren der "debugging-stylesheets". Sie können die natürlich auch löschen, wenn Sie die nicht mehr brauchen. Noch mal speichern, noch mal rüber, und Sie haben eine supergute gemischte Navigation mit einem Dropdown hier und hier eine Social-Media-Leiste. Wenn ich das jetzt im Dev-Tool aufrufe und das Ganze untersuche, und hier die Device-Mode einstelle, und das etwas verkleinere, dann sehen Sie, dass hier das gleich umbricht, und da haben Sie ganz wunderbar die Dropdown-Liste, das Social-Media-Menü, und wenn wir es noch kleiner machen, dann sehen Sie alles untereinander weg. So, und wieder normal im Browser, so sieht es aus, ein gemischtes Menü per Flexbox.

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...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016

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!