So erstellen Sie ein Responsive Slide-Down-Navigationsmenü

Nach einer langen Zeit der Erforschung mobiler responsiver Layouts habe ich einige Zeit damit verbracht, mit verschiedenen UI-Designs zu experimentieren. Ein wichtiger Hotspot auf der Seite ist häufig die Hauptnavigation der Website. Benutzer möchten einen schnellen Zugriff auf Ihre Inhaltsseiten. Dies ist immer der Fall, entweder auf einem vollständigen Monitor oder auf einem kleineren Bildschirm für die mobile Reaktion.

In diesem Tutorial möchte ich Ihnen zeigen, wie Sie eine Kombination aus CSS3-Medienabfragen zusammen mit jQuery verwenden können, um ein gleitendes Navigationsmenü zu verwalten. Die Links erscheinen im Frontend normal, werden jedoch nach der Größenänderung unter 600px in einem verborgenen Menü angezeigt. Stattdessen sehen wir ein kleines Menü-Pulldown-Symbol, das bei Befehl geöffnet und geschlossen wird.

Live Demo - Quellcode herunterladen

Dokument einstellen

Der obere Überschriftenbereich enthält eine kleine Auswahl von Dateien, die wir benötigen, um diesen Effekt zu erzeugen. Ich füge ein benutzerdefiniertes Stylesheet zusammen mit einer Kopie der neuesten von Google gehosteten jQuery-Bibliothek bei. Alle benutzerdefinierten JS-Funktionen werden in einer externen Datei mit dem Namen menu.js gespeichert.

Responsive Sliding Navigation Demo

Der größte Teil der Seitenmarkierung ist abgesehen vom Kopfzeilenbereich ziemlich unwichtig. Ich habe versucht, alles auf einer festen Höhe zu halten, aber der Header kann keine feste CSS-Eigenschaft verwenden. Andernfalls wird die Seite nicht erweitert, wenn das Menü geöffnet und geschlossen wird. Die Überschrift und die Navigationslinks werden also von eingerichtet Zeilenhöhe Werte in CSS.

<ul> <li>Zuhause</li> <li>Über</li> <li>Projekte</li> <li>Blog</li> <li>In Kontakt kommen</li> </ul> Nav-Menü <h1>Designee</h1>

Die Seite h1 title passt am besten als letztes Element, sodass die Kopfzeile immer die konstante Höhe behält. Direkt neben der Überschrift befindet sich ein Ankerlink mit der ID #navbtn und dieses enthält das verschiebbare Menü-Link-Symbol. Es wird nur mit CSS angezeigt, wenn die Breite einen bestimmten Schwellenwert unterschreitet.

Markup-Positionen in CSS

Normalerweise denke ich nicht daran, jQuery zu verwenden, wann immer es möglich ist. Das einzige Problem beim Umschalten von Menüs ist, dass wir dies in CSS nicht effizient ausführen können. Die jQuery-Methoden wenden Inline-CSS-Stile an, die das Standard-Stylesheet überschreiben. Es kommt also darauf an, die Elemente mit CSS zu positionieren und sie mit JavaScript richtig zu animieren.

html, körper, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, i, zentrum, dl, dt, dd, ol, ul, li, fieldset, form, label, legende, tabelle, caption, tbody, tfoot, thead, tr, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hgroup, menu, nav, ausgabe, rubin Abschnitt, Zusammenfassung, Zeit, Marke, Audio, Video {margin: 0; Polsterung: 0; Grenze: 0; Schriftgröße: 100%; font: erben; vertikal ausrichten: Grundlinie; Umriss: keine; -webkit-font-smoothing: Antialiasing; -webkit-Textgröße anpassen: keine; -ms-Textgröße anpassen: keine; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; } html {height: 101%; } body {background: # f8f8f8 url ('images / bg.png'); / * BG Neutral http://subtlepatterns.com/ps-neutral/ * / font-family: 'Helvetica Neue', Helvetica, Arial, serifenlos; Schriftgröße: 62,5%; Zeilenhöhe: 1; Farbe: # 343434; Polsterung unten: 55px; } :: selection {background: # b9e9b9; Farbe: # 555; } :: - moz-selection {background: # b9e9b9; Farbe: # 555; } :: - webkit-selection {background: # b9e9b9; Farbe: # 555; } a {color: # 6992c0; } a: hover {color: # 77a4dc; } h2 {font-size: 2.9em; Zeilenhöhe: 1.4em; Farbe: # 626262; Rand unten: 22px; } p {font-size: 1.6em; Zeilenhöhe: 1.7em; Farbe: # 777; Rand unten: 15px; } #w {Anzeige: Block; Max-Breite: 900px; min-Breite: 300px; Marge: 0 auto; } #content {margin: 0 1em; Hintergrund: #fff; Polsterung: 0 10px; } #pagebody {padding: 15px 25px; }

Meine Standard-CSS-Browser-Reset-Einstellungen enthalten einen Satz benutzerdefinierter Codes für die Seitentypografie. Auch unsere Hintergrundkachel für den Körper ist PS Neutral vor subtilen Mustern gespeichert. Ich musste den Wrapper-Container und den Body-Container in 2 Divs aufteilen, da wir links und rechts Seitenauffüllung verwenden, um zu verhindern, dass die Seite auf 100% Breite wächst. Hinzufügen von Randwerten zum Marge: 0 auto; Diese Eigenschaft führt zum Verlust der zentrierten Positionierung.

/ * Navigationsleiste * / #topnav {Anzeige: Block; Breite: 100%; Position: relativ; } #topnav #navbtn {display: none; schweben rechts; oben: 0; Breite: 20px; Höhe: 70px; Hintergrund: URL ('images / menu.png') zentriert keine Wiederholung; Gedankenstrich: -99999px; Überlauf versteckt; } #topnav nav {position: absolut; oben: 0; rechts: -10px; } #topnav nav ul {list-style: none; } #topnav nav ul li {display: block; Schwimmer: links; Schriftgröße: 1.4em; Rand rechts: 4px; } #topnav nav ul li a {display: block; Textdekoration: keine; Zeilenhöhe: 70px; Farbe: # 8ea188; Schriftdicke: fett; Polsterung: 0 10px; Rahmen unten: 2px fest #fff; } #topnav nav ul li a: hover {color: # 6f8767; Hintergrund: # ddecd9; Rahmenfarbe: # bdd8b5; }

Indem man das Innere stylt

Element behalten wir die Kontrolle über die Kopfleiste. Indem wir die Position auf absolut setzen, kontrollieren wir, wie weit die Navigationslinks nach der Titelüberschrift folgen werden. Beachten Sie, wie die #navbtn wird ausgeblendet, bis die Größe mit Medienabfragen unter 560px geändert wird. Alles andere wird eingestellt, einschließlich Höhe, Breite und Positionierung.

Responsive Styles

Es gibt nur eine kleine Anzahl von Änderungen, die ich vorgenommen habe, wenn die Browsergröße kleiner als 560px ist. Ich denke nicht, dass dies eine magische Zahl ist, es ist einfach ein netter Bereich, wenn die Standardnavigation gegen den Logotext stößt. In diesem Fall müssen wir das Nav-Menü ausblenden und das Symbol zum Umschalten anzeigen.

/ * responsive styles * / @media screen und (max-width: 560px) {h2 {font-size: 2.2em; } p {font-size: 1.45em; Zeilenhöhe: 1.55em; } #topnav {height: auto; } #topnav nav {display: none; Position: statisch; Breite: 100%; oben: auto; rechts: auto; } #topnav nav ul li {float: keine; Marge: 0; } #topnav nav ul li a {display: block; Breite: 100%; Zeilenhöhe: 1.4em; Grenze: 0; Polsterung: 6px 9px; Hintergrund: # dcf4dc; } #topnav nav ul li a: hover {background: # cbdcc5; } #topnav nav ul li a.sel {color: # 6f8767; Hintergrund: # cbdcc5; } #topnav #navbtn {display: block; }}

Es bedeutet auch, die absolute Positionierung aus dem Nav-Element zu entfernen, damit es als statischer Block dargestellt wird. Die Nav-Ankerverknüpfungen werden als vollständige Zeilen mit 100% Breite angezeigt, um beim Tippen auf einen mobilen Bildschirm schneller zu erreichen. Auch die inneren Seitenkopfzeilen + Absätze werden etwas verkleinert und mit angepassten Zeilenhöhenwerten gekoppelt.

Interaktionen mit JavaScript

Das letzte Code-Stück in menu.js könnte auch direkt in das HTML-Dokument eingefügt werden. Da wir jedoch mehr als eine einzige Toggle-Methode verwenden müssen, ist es sauberer und effizienter, die Markierung von dynamischen Effekten zu trennen. Ich werde diese Datei in Abschnitte unterteilen, damit sie einfacher zu lesen ist.

$ (function () {var nb = $ ('# navbtn'); var n = $ ('# topnav nav'); $ (window) .on ('resize', function () {if (nb.is ( ': hidden') && n.is (': hidden') && $ (window) .width ()> 569) {// Wenn sowohl das Navigationsmenü als auch die Navigationsschaltfläche ausgeblendet sind, // wird das responsive nav geschlossen und Das Nav-Menü ist immer noch ausgeblendet. // Zeigen Sie einfach das Nav-Menü an, das bei <560px Breite automatisch ausgeblendet wird und die Klasse entfernt. $ ('# topnav nav'). show (). addClass ('keep-nav-closed') ;}});

Der erste große Brocken ist wohl der verwirrendste. Es handelt sich um kleinere Fehler beim Ändern der Größe von Browsern von "responsive" auf "responsive" und sollte keine Auswirkungen auf Smartphones haben. Wir fügen einen Event-Handler an das Fenster, um die Größenänderung von .on () zu überprüfen. Die beiden unterschiedlichen Logikanweisungen prüfen die Variable, die auf das Element "nav" der Kopfzeile abzielt, sowie den Link zum Umschalten des Navigationsmenüs.

Wenn der Browser reagiert und der Benutzer das Menü öffnet / schließt, wird eine Inline angehängt Stil Attribut. Dies hat Vorrang vor allem, was im Stylesheet geschrieben ist. Es ist ein Problem, nachdem das Menü geöffnet und geschlossen wurde. Das Navi wird einen permanenten Stil haben Anzeige: keine; selbst nach einer Größenänderung von mehr als 560px.

Dies ist, worauf die 2nd if {} -Anweisung prüft. Wenn sowohl die Navigationsschaltfläche als auch die Menüschaltfläche ausgeblendet sind, reagierte das Layout, der Benutzer öffnete / schloss das Menü und vergrößerte seine Größe wieder in der normalen Ansicht. Wir müssen also nur das Nav wieder anzeigen, aber es gibt ein Problem. Die show () -Methode von jQuery fügt auch Stile inline hinzu, dh, wenn Sie die Größe des Reaktionsbereichs ändern, bleibt das Nav-Menü dauerhaft geöffnet. Um dies zu beheben, füge ich eine Klasse hinzu .keep-nav-closed. Dies wird nur hinzugefügt, wenn das Navi geschlossen und dann in der Größe vergrößert wird. Wenn das Navi offen bleibt, bleibt es geöffnet, wenn es größer und wieder verkleinert wird.

if ($ (this) .width () <570 && n.hasClass ('keep-nav-closed')) {// Wenn sowohl das Nav-Menü als auch die Nav-Schaltfläche sichtbar sind, // wechselt das responsive Nav von Open nach reagiert nicht, dann wieder zurück. // Das Nav-Menü wieder ausblenden und die versteckte Klasse $ entfernen ('# topnav nav'). hide (). removeAttr ('class'); }

Nun sollte die andere if {} -Anweisung sinnvoll sein, warum wir nach dieser Klasse suchen. Es erscheint erst nach dem 2. Mal, wenn die Größe geändert und das Nav geöffnet wird. Daher wissen wir, dass die Klasse stattdessen auf diese Weise entfernt wird, wenn sie auf eine reaktive Breite zurückgesetzt wird. Es ist ein seltsamer Fehler, und ich muss noch eine kleinere oder schnellere Lösung für die Handhabung der Inline-jQuery-Stile finden, als das Attribut insgesamt zu entfernen (was immer noch Probleme verursacht). Lassen Sie uns nun weitergehen und einen Blick auf das letzte Segment von JavaScript werfen.

$ ('# topnav nav a, # topnav h1 a, # btmnav nav a'). on ('click', Funktion (e) {e.preventDefault (); // Stoppen aller Hash (#) Ankerlinks beim Laden) ); $ ('# navbtn'). on ('click', Funktion (e) {e.preventDefault (); $ ("# topnav nav"). slideToggle (350);});

Beide Event-Handler suchen nach Klickereignissen für verschiedene Ziele. Der erste ist für alle verschiedenen Ankerverknüpfungen in den Kopfzeilen- und Fußzeilenbereichen gesperrt. Die href-Werte sind Hash-Symbole (#), die nicht irgendwo hingehen, also habe ich sie so eingestellt, dass sie nichts laden. Dies ist ähnlich, wenn Sie auf die Navigationsschaltfläche klicken, da kein Hash in die Seiten-URL geladen werden soll. Stattdessen wird das responsive hidden nav Menü bei 350 Millisekunden geöffnet und geschlossen, wobei der href-Wert ignoriert wird.

Live Demo - Quellcode herunterladen