Die Erstellung einer reaktionsschnellen Navigationsleiste mit Flexbox

() translation by (you can also view the original English article)

Zeit für eine praktische Übung in der Flexbox! In diesem Tutorial verwenden wir Flexbox, um eine reaktionsfähige, umschaltbare Navigationsleiste mit unterschiedlichen Layouts für Mobil-, Tablet- und Desktop-Bildschirme zu erstellen.

Flexbox ist perfekt für die reaktionsschnelle Navigation

Flexbox ist ein vielseitiges Layoutmodul, mit dem wir eindimensionale Layouts erstellen können, die Flexibilität erfordern, z. B. reaktionsschnelle Menüs. Mithilfe der Ordnungs-, Ausrichtungs- und Größeneigenschaften von flexbox können wir Navigationsleisten erstellen, die ihre Layouts an die Größe des Ansichtsfensters anpassen und gleichzeitig die HTML-Gliederung logisch und zugänglich halten.

In diesem Tutorial erfahren Sie, wie Sie mit Flexbox eine reaktionsschnelle Navigationsleiste erstellen. Unsere Flexbox-Navigation verfügt je nach Größe des Ansichtsfensters über drei verschiedene Layouts:

ein mobiles Layout, in dem standardmäßig nur das Logo und eine Umschalttaste sichtbar sind und Benutzer das Menü mit der Umschalttaste öffnen und schließen können,
Ein Tablet-Layout, in dem zwei Call-to-Action-Schaltflächen zwischen dem Logo und dem Umschalten im Standardzustand angezeigt werden und der Rest des Menüs umschaltbar bleibt.
Ein Desktop-Layout, in dem alle Menüelemente mit Ausnahme der Umschalttaste auf dem Bildschirm angezeigt werden.

Wir werden Medienabfragen verwenden, um die Größe des Ansichtsfensters des Browsers des Benutzers zu ermitteln. Unsere reaktionsschnelle Navigationsleiste ist zuerst mobil, daher erstellen wir zuerst das mobile Layout. Anschließend fügen wir das Tablet- und Desktop-spezifische CSS min-width von Medienabfragen mit minimaler Breite hinzu.

So sieht das mobile Menü aus, wenn es vom Benutzer geöffnet wird:

Hier ist die Tablet-Version:

Und so sieht unsere Flexbox-Navigation auf dem Desktop aus:

Das Beste an Flexbox-Menüs ist, dass sie wirklich sehr zugänglich sind, da HTML nur eine einfache, ungeordnete Liste ist. Die Benutzer von Bildschirmleseprogrammen werden also nicht einmal bemerken, dass es unterschiedliche Layouts gibt, da das gesamte Styling mit CSS und etwas jQuery (für die Umschaltfunktion) erfolgt.

Sie können auch die interaktive Demo testen:

Sind Sie Neu bei Flexbox?

Wenn Sie nicht an Flexbox gewöhnt sind oder eine Auffrischung benötigen, bieten Ihnen diese Anfängerhandbücher alle Fähigkeiten, die Sie zum Ausfüllen dieses Tutorials benötigen:

1. Erstellen Sie den HTML-Code

Der HTML-Code ist eine einfache <ul>-Liste, wie Sie unten sehen können. Die .menu-Klasse ist der Flex-Container und die Listenelemente sind die Flex-Elemente. Ihre Reihenfolge wird an die Größe des Ansichtsfensters des Geräts des Benutzers angepasst. Beispielsweise stehen die Schaltflächen Log In und Sign Up auf dem Handy an erster Stelle, werden jedoch am Ende des Menüs auf dem Desktop angezeigt. Diesen Effekt erzielen wir, indem wir die Bestellungseigenschaften der Flexbox nutzen.

  <nav> <ul class="menu"> <li class="logo"><a href="#">Invisible App</a></li> <li class="item"><a href="#">Home</a></li> <li class="item"><a href="#">About</a></li> <li class="item"><a href="#">Services</a></li> <li class="item"><a href="#">Features</a></li> <li class="item"><a href="#">Blog</a></li> <li class="item"><a href="#">Contact</a> </li> <li class="item button"><a href="#">Log In</a></li> <li class="item button secondary"><a href="#">Sign Up</a></li> <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li> </ul> </nav>

Hinweis: Die Umschaltfläche am Ende der Liste verwendet ein Font Awesome-Symbol. Sie müssen Font Awesome zum Abschnitt <head> des HTML-Codes und jQuery zum Ende des Abschnitts <body> hinzufügen, damit die Demo ordnungsgemäß funktioniert.

2. Fügen Sie einige grundlegende Stile hinzu

Für das grundlegende Styling habe ich einige Standardwerte und -farben festgelegt. Sie können jedoch auch andere Stilregeln verwenden:

  /* Basic styling */ * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: sans-serif; } nav { background: #222; padding: 5px 20px; } ul { list-style-type: none; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } .logo a:hover { text-decoration: none; } .menu li { font-size: 16px; padding: 15px 5px; white-space: nowrap; } .logo a, .toggle a { font-size: 20px; } .button.secondary { border-bottom: 1px #444 solid; }

3. Beginnen Sie mit der mobilen Navigation

Da unsere Navigation zuerst mobil sein wird, beginnen wir mit dem mobilen Layout. Responsive Flexbox-Menüs erstellen normalerweise spaltenbasierte Layouts für Mobilgeräte. Durch Hinzufügen der flex-direction: column; Regel zum Flex-Container können wir die Menüpunkte schnell untereinander packen.

Obwohl dies eine hervorragende Lösung ist, werden wir sie in unserem Beispiel nicht verwenden. Stattdessen erstellen wir ein Zeilenumbruch-Layout für Mobilgeräte, damit wir das Logo und die Umschalttaste oben im Menü nebeneinander anzeigen können.

Der CSS-Trick besteht darin, dass wir regelmäßige Menüelemente wie Home und About über den gesamten Container mit der width: 100%; erstellen. So, Flexbox zeigt sie also untereinander an, während das Logo und der Umschalter ihre natürlichen Größen beibehalten und in derselben Reihe oben auf der Navigationsleiste sitzen.

Im folgenden CSS verwenden wir auch die Eigenschaften justify-content und align-items, um die flexiblen Elemente horizontal und vertikal auszurichten. Außerdem verstecken wir die .item-Elemente über die display: none; Regel. Menüelemente werden nur angezeigt, wenn der Benutzer auf die Umschalttaste klickt. Die .active-Klasse befindet sich nicht im HTML-Code. Wir fügen sie dynamisch mit einem winzigen jQuery-Skript hinzu.

  /* Mobile menu */ .menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .toggle { order: 1; } .item.button { order: 2; } .item { width: 100%; text-align: center; order: 3; display: none; } .item.active { display: block; }

Wie Sie oben sehen können, haben wir auch die Reihenfolge der Menüpunkte mithilfe der order-Eigenschaft geändert. Unsere HTML-Gliederung folgt einer logischen Reihenfolge. Auf diese Weise möchten wir, dass Benutzer von Bildschirmleseprogrammen und Suchmaschinen-Bots das Menü durchlaufen.

Im mobilen Layout möchten wir jedoch das Logo und die Umschalttaste oben im Menü anzeigen. Wir möchten auch die beiden Handlungsaufforderungstasten vor regulären Menüelementen anzeigen. Also richten wir die folgende Reihenfolge ein:

.logo erhält die order: 0; Wert, da dies der erste Artikel sein wird (da dies jedoch der Standardwert der order ist, müssen wir ihn nicht zum CSS hinzufügen).
.toggle bekommt 1, da es direkt nach .logo kommt,
.item.button, der zu den Schaltflächen Log In und Sign Up gehört, erhält 2,
und .item, das zu den restlichen Menüelementen gehört, erhält 3.

4. Erstellen Sie das Tablet-Menü

Wir fügen das Tablet-Layout min-width einer Medienabfrage mit minimaler Breite hinzu. Hier sind standardmäßig vier Menüelemente sichtbar: das Logo, die beiden Handlungsaufforderungstasten und das Umschalten. Um alles schön zu machen, wird unser CSS:

Ändern Sie die order der Menüelemente, um das Layout an die Ansichtsfenster des Tablets anzupassen.
Richten Sie die Elemente neu aus (siehe Erklärung unten).
Lassen Sie die Schaltflächen Log In und Sign Up wie echte Schaltflächen aussehen (im mobilen Layout werden sie als Links angezeigt, da sie Teil der umschaltbaren Dropdown-Liste sind).

In Code:

  /* Tablet menu */ @media all and (min-width: 600px) { .menu { justify-content: center; } .logo { flex: 1; } .toggle { flex: 1; text-align: right; } .item.button { width: auto; order: 1; display: block; } .toggle { order: 2; } .button.secondary { border: 0; } .button a { padding: 7.5px 15px; background: teal; border: 1px #006d6d solid; } .button.secondary a { background: transparent; } .button a:hover { text-decoration: none; } .button:not(.secondary) a:hover { background: #006d6d; border-color: #005959; } .button.secondary a:hover { color: #ddd; } }

Im Tablet-Layout werden Menüelemente anders ausgerichtet. Wenn Sie sich die vier sichtbaren Menüelemente ansehen, sehen Sie, dass die beiden Schaltflächen in der Mitte angezeigt werden, während das Logo und der Schalter am linken und rechten Ende des Containers verschoben werden:

Wir können diesen Effekt mit dem flex: 1; CSS-Regel. Die flex-Eigenschaft ist eine Abkürzung für flex-grow, flex-shrink und flex-basis. Es kann mit vielen verschiedenen Wertekombinationen existieren. Wenn es mit nur einem Wert deklariert ist, gehört es zu flex-grow, während flex-shrink und flex-base ihre Standardwerte beibehalten.

Im obigen CSS haben wir den flex: 1; Regel für die Elemente .logo und .toggle. Auf diese Weise können wir dem Browser anzeigen, dass wir, wenn auf dem Bildschirm ein positiver Platz vorhanden ist, diesen zwischen diesen beiden Elementen teilen möchten. Da die Schaltflächen Log In und Sign Up ihren Standardwert 0 für flex-grow beibehalten, erhalten sie nichts aus dem zusätzlichen Speicherplatz. Sie bleiben also in der Mitte des Containers, da sie sich an den justify-content: center; Regelsatz für den Flex-Container.

5. Erstellen Sie das Desktop-Menü

Das Desktop-Menü verbirgt den Umschalter und setzt die ursprüngliche Reihenfolge und natürliche Breite jedes Elements zurück.

Es ist wichtig zu beachten, dass die Tablet-spezifischen Regeln auch für das Desktop-Menü gelten. Dies liegt daran, dass hier die Breite des Ansichtsfensters größer als 600px und 900px ist, sodass beide Medienabfragen wirksam werden. So behält .logo seinen flex: 1; Eigenschaft und schiebt den Rest der Elemente an das Ende des Containers.

  /* Desktop menu */ @media all and (min-width: 900px) { .item { display: block; width: auto; } .toggle { display: none; } .logo { order: 0; } .item { order: 1; } .button { order: 2; } .menu li { padding: 15px 10px; } .menu li.button { padding-right: 0; } }

6. Fügen Sie die jQuery-Funktionalität hinzu

Wir fügen den Menüs für Mobilgeräte und Tablets die Umschaltfunktion mit einem kleinen jQuery-Skript hinzu. Mithilfe eines Klickereignishandlers erkennt unser Skript, wenn der Benutzer auf die Umschalttaste klickt oder darauf tippt. Anschließend wird mit einer if-else-Anweisung überprüft, ob das Dropdown-Menü im Moment der Benutzeraktion ein- oder ausgeschaltet wird.

Wenn das Dropdown-Menü aktiviert ist, wird jedem Element die Klasse .active hinzugefügt. Es ersetzt auch das Hamburger-Symbol durch ein Schließen-Symbol (fa-times), ebenfalls von Font Awesome. Wenn das Dropdown-Menü deaktiviert ist, wird die .active-Klasse aus jedem Element entfernt und das Symbol auf das ursprüngliche Hamburger-Symbol (fa-bars) zurückgesetzt.

  $(function() { $(".toggle").on("click", function() { if ($(".item").hasClass("active")) { $(".item").removeClass("active"); $(this).find("a").html("<i class='fas fa-bars'></i>"); } else { $(".item").addClass("active"); $(this).find("a").html("<i class='fas fa-times'></i>"); } }); });

Abschluss

Unsere reaktionsschnelle Navigationsleiste für Mobilgeräte ist in drei verschiedenen Layouts verfügbar. Flexbox ist ein großartiges Werkzeug, um komplexe Layouts ohne Änderungen zu implementieren. Wenn Sie die Ausrichtungs-, Ordnungs- und Größeneigenschaften von Flexbox mit Medienabfragen kombinieren, können Sie verschiedene Layouts für verschiedene Ansichtsfenster erstellen, ohne den HTML-Quellcode bearbeiten zu müssen.

Wenn Sie daran interessiert sind, wie man Flexbox in Ihrer täglichen Arbeit verwenden kann, schauen Sie sich diese anderen praktischen Tutorials an. Jedes hilft Ihnen beim Lernen, indem es Dinge erstellt, die Sie tatsächlich verwenden können: