So erstellen Sie eine Responsive Navigation

Einer der schwierigsten Teile antwortete auf einer Website ist “die Navigation”, Dieser Teil ist sehr wichtig für die Barrierefreiheit der Website, da Besucher hierdurch über die Webseiten springen.

Es gibt viele Möglichkeiten, eine responsive Website-Navigation zu erstellen, und sogar einige jQuery-Plugins sind in Sekundenschnelle verfügbar.

Anstatt eine sofortige Lösung anzuwenden, werden wir Sie in diesem Beitrag auf weiterführen Wie baut man eine einfache Navigation vom Boden aus? und verwenden Sie die CSS3-Medienabfragen und ein wenig jQuery, um sie in einer kleinen Bildschirmgröße wie die Smartphones richtig anzuzeigen.

Also fangen wir einfach an.

• Demo
• Quelle herunterladen

HTML

Zuerst fügen wir das Meta-Ansichtsfenster in der Kopf Etikett. Diese Meta Viewport Ein Tag ist erforderlich, damit unsere Seite in jeder Bildschirmgröße korrekt skaliert werden kann, insbesondere im mobilen Ansichtsfenster.

… Und fügen Sie dann das folgende Snippet als Navigations-Markup in der hinzu Karosserie Etikett.

Wie Sie oben sehen können, haben wir sechs Hauptmenü-Links und einen weiteren Link hinzugefügt. Dieser zusätzliche Link wird verwendet ziehen die Menünavigation, wenn sie auf einem kleinen Bildschirm ausgeblendet ist.

Lesen Sie weiter: Vergessen Sie nicht das Viewport-Meta-Tag.

Styles

In diesem Abschnitt beginnen wir mit der Gestaltung der Navigation. Der Stil hier ist nur dekorativ, Sie können beliebige Farben auswählen, wie Sie möchten. Aber in diesem Fall wollen wir (ich persönlich) das Karosserie eine weiche und cremige Farbe haben.

 body Hintergrundfarbe: # ece8e5;  

Das nav Tag, das die Navigation definiert 100% volle Breite des Browserfensters, während die ul wo es unsere primären Menü-Links enthält 600px für die Breite.

 nav Höhe: 40px; Breite: 100%; Hintergrund: # 455868; Schriftgröße: 11pt; Schriftfamilie: 'PT Sans', Arial, Sans-Serif; Schriftdicke: fett; Position: relativ; Rand unten: 2px fest # 283744;  nav ul padding: 0; Marge: 0 auto; Breite: 600px; Höhe: 40px;  

Dann werden wir schweben Das Menü ist auf der linken Seite verlinkt, so dass sie horizontal nebeneinander angezeigt werden. Wenn Sie jedoch ein Element verschieben, wird auch der übergeordnete Teil des Elements reduziert.

 nav li display: inline; Schwimmer: links;  

Wenn Sie von dem HTML-Markup oben erfahren, haben wir bereits hinzugefügt Clearfix in dem Klasse Attribut für beide nav und ul Um Dinge zu klären, wenn wir die Elemente mit diesem CSS-Clearfix-Hack in sich verschieben. Fügen wir also die folgenden Stilregeln in das Stylesheet ein.

 .clearfix: vorher, .clearfix: nach content: ""; Anzeige: Tisch;  .clearfix: after clear: both;  .clearfix * zoom: 1;  

Da haben wir sechs Menü-Links und haben auch den Container für angegeben 600px, Jeder Menü-Link wird haben 100px für die Breite.

 nav a color: #fff; Anzeige: Inline-Block; Breite: 100px; Text ausrichten: Mitte; Textdekoration: keine; Zeilenhöhe: 40px; Text-Schatten: 1px 1px 0px # 283744;  

Die Menülinks werden mit getrennt 1px rechte Grenze, bis auf die letzte. Erinnern Sie sich an unseren vorherigen Beitrag zum Boxmodell, für den die Breite des Menüs erweitert wird 1px Ich mach das 101px wie der Grenzzusatz, so ändern wir hier die Box-Sizing Modell zu Border-Box Damit bleibt das Menü erhalten 100px.

 nav li a border-right: 1px fest # 576979; Box-Dimensionierung: Border-Box; -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box;  nav li: letztes Kind a border-right: 0;  

Als nächstes wird das Menü hellere Farben haben, wenn es in ist :schweben oder :aktiv Zustand.

 nav a: hover, nav a: aktiv Hintergrundfarbe: # 8c99a4;  

… Und schließlich wird der zusätzliche Link ausgeblendet (für den Desktop-Bildschirm).

 nav a # pull display: none;  

Zu diesem Zeitpunkt gestalten wir nur die Navigation und nichts wird passieren, wenn wir die Größe des Browser-Fensters ändern. Lass uns also zum nächsten Schritt springen.

Lesen Sie weiter: CSS3 Box-Sizing (Hongkiat.com)

Medien-Anfragen

Die CSS3-Medienabfragen werden verwendet, um zu definieren, wie sich die Stile bei bestimmten Haltepunkten oder speziell den Bildschirmgrößen der Geräte verschieben.

Da ist unsere Navigation zunächst 600px fix-width definieren wir zuerst die Stile, wenn sie in angesehen werden 600px oder kleinere Bildschirmgröße, also praktisch, diese ist unser erster Haltepunkt.

In dieser Bildschirmgröße werden die beiden Menülinks nebeneinander angezeigt ulBreite wird hier sein 100% des Browser-Fensters, während die Menü-Links haben 50% für die Breite.

 @media screen und (max-width: 600px) nav height: auto;  nav ul width: 100%; Bildschirmsperre; Höhe: Auto;  nav li Breite: 50%; Schwimmer: links; Position: relativ;  nav li a border-bottom: 1px fest # 576979; Rand rechts: 1px fest # 576979;  nav a text-align: left; Breite: 100%; Text-Gedankenstrich: 25px;  

… Und dann definieren wir auch, wie die Navigation angezeigt wird, wenn der Bildschirm kleiner wird 480px oder niedriger (so ist dies unser zweiter Haltepunkt).

In dieser Bildschirmgröße wird der zusätzliche Link, den wir zuvor hinzugefügt haben, sichtbar und wir geben den Link auch ein “Speisekarte” Symbol auf der rechten Seite mit der :nach dem Pseudoelement, Die primären Menülinks werden ausgeblendet, um mehr vertikale Leerzeichen auf dem Bildschirm zu speichern.

 @media only screen und (max-width: 480px) nav border-bottom: 0;  nav ul display: none; Höhe: Auto;  nav a # pull display: block; Hintergrundfarbe: # 283744; Breite: 100%; Position: relativ;  nav a # pull: after content: ""; Hintergrund: URL ('nav-icon.png') keine Wiederholung; Breite: 30px; Höhe: 30px; Anzeige: Inline-Block; Position: absolut; rechts: 15px; oben: 10px;  

Zuletzt, wenn der Bildschirm um etwas kleiner wird 320px und unten wird das Menü vertikal von oben nach unten angezeigt.

 @media only screen und (max-width: 320px) nav li display: block; Float: keine; Breite: 100%;  nav li a border-bottom: 1px fest # 576979;  

Jetzt können Sie versuchen, die Größe des Browserfensters zu ändern. Es sollte jetzt in der Lage sein, die Bildschirmgröße anzupassen.

Lesen Sie weiter: Medienabfragen für Standardgeräte.

Das Menü anzeigen

An diesem Punkt ist das Menü immer noch ausgeblendet und wird nur angezeigt, wenn es durch Antippen oder Klicken auf das Symbol benötigt wird “Speisekarte” link und wir können den Effekt mit der jQuery erreichen slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', Funktion (e) e.preventDefault (); menu.slideToggle (););); 

Wenn Sie jedoch die Größe des Browser-Fensters unmittelbar nach dem Anzeigen und Ausblenden des Menüs auf einem kleinen Bildschirm ändern, bleibt das Menü ausgeblendet Anzeige: keine Der von der jQuery generierte Stil wird immer noch im Element angehängt.

Daher müssen wir diesen Stil bei der Größenänderung des Fensters wie folgt entfernen:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); ); 

In Ordnung, das sind alle Codes, die wir brauchen, wir können die Navigation jetzt über die folgenden Links anzeigen und wir empfehlen, sie in einem responsiven Designtest-Tool wie dem Responsinator zu testen, damit Sie sie in verschiedenen Breiten gleichzeitig anzeigen können.

• Demo
• Quelle herunterladen

Bonus: Ein alternativer Weg

Wie wir bereits in diesem Beitrag erwähnt haben, gibt es einige andere Möglichkeiten, dies zu tun und eine aufgerufene JavaScript-Bibliothek zu verwenden SelectNav.js ist einer der einfachsten Wege. Dies ist ein reines JavaScript, das sich nicht auf eine andere Bibliothek von Drittanbietern wie jQuery verlässt.

Grundsätzlich wird Ihr Listenmenü dupliziert und in ein Menü umgewandelt Über das Dropdown-Menü können Sie auswählen, welches Fenster je nach Bildschirmgröße durch Medienabfragen ausgeblendet oder angezeigt wird.

Ein Vorteil, den ich an dieser Praxis mag, ist, dass wir uns nicht um den Navigationsstil kümmern müssen

Das Menü verwendet die native Benutzeroberfläche des Geräts.

Weitere Informationen finden Sie in der offiziellen Dokumentation.

Fazit

Wir haben es geschafft, von Grund auf eine responsive Navigation zu erstellen. Dieses hier erstellte Beispiel ist nur eines von Beispielen. Wie wir weiter oben in diesem Beitrag angegeben haben und oben gezeigt haben, gibt es viele andere Lösungen, die Sie implementieren können. Nun ist es Ihrer Entscheidung überlassen, die für Ihre Anforderungen am besten geeignete Praxis und die Navigationsstruktur Ihrer Website auszuwählen.