Beim Entwerfen eines Navigationssystems für Ihre Website ist es wichtig, dynamische Änderungen für den Umgang mit mobilem Support und responsive Designs zu berücksichtigen. Ein anderer systematischer Ansatz besteht darin, Ihre Besucher während des gesamten Betrachtungsprozesses unter Kontrolle zu halten. Dies erfordert häufig ein Schnellzugriffsmenü oder einen Dropdown-Bereich, um Links zu anderen Webseiten zu ziehen.
In diesem Tutorial werde ich eine obere Navigationsleiste erstellen, die erst angezeigt wird, wenn Sie sich außerhalb der Kopfzeilennavigation befinden. Dieser Effekt ist großartig, wenn Sie einige Seiten haben, auf die Besucher am häufigsten zugreifen. Die klebrige Navigationsleiste bleibt am oberen Bildschirmrand fixiert und verschwindet erst, wenn Sie wieder in die Kopfzeilen-Navigationszone gelangen. Um eine Vorstellung davon zu bekommen, was wir machen werden, checke mein Live-Demo-Beispiel nach dem Sprung!
Live Demo - Quellcode herunterladen
Strukturierung des Dokuments
Zuerst sollten wir den Projektarbeitsbereich erstellen und den ursprünglichen HTML-Code erstellen. Es ist erwähnenswert, dass wir zusammen mit den CSS-Effekten einige grundlegende jQuery verwenden müssen.
Erstellen Sie einen neuen Satz von Dokumenten mit dem Namen index.html und styles.css im selben Verzeichnis. Ich verwende ein benutzerdefiniertes Hintergrundbild- und Logo-Banner in der Kopfzeile. Sie können diese Ressourcen zusammen mit meinem Quellcode herunterladen, wenn Sie Zeit sparen möchten. Jetzt müssen wir in der Hauptindexdatei einen HTML5-Doctype einrichten und die zugehörigen Links hinzufügen.
Glücklicherweise können viele Ressourcen, die wir benötigen, extern gehostet werden. In unserem benutzerdefinierten Google-Webfont namens Capriola wird der Kopfzeilentext formatiert. Außerdem benötigen Sie eine Kopie der neuesten jQuery-Bibliothek, die von Googles Code-CDN gehostet wird. Das meiste davon sollte bekannt sein, also springen wir jetzt in den Körperinhalt.
HTML-Bausteine
Das Layout ist nicht so kompliziert, wie Sie vielleicht denken. Ganz nach dem Öffnen des Body-Tags müssen wir die feste Navigationsleiste einrichten. Dieses Element wird verwendet Anzeige: keine; bleiben Sie zunächst ausgeblendet, bis Sie die Seite ein wenig nach unten scrollen.
Das innere UL-Element zentriert alle Links, sodass sie sich an derselben Stelle wie der Hauptinhalt befinden. Unter dieser Navbar richten wir dann den Hauptumbruch div ein, der die Seite auf 710px Breite zentriert, minus 30px für das Auffüllen. Der Gesamtwert beträgt 680px, was die perfekte Größe für Pontus Johanssons Freebie im Banner-Design ist.
Die Hauptnavigationsleiste hat genau die gleichen Links, die wir in der festen Kopfleiste beibehalten. Dies wurde von Design aus so gemacht, Sie konnten jedoch Änderungen vornehmen und nur die wichtigsten Links in Ihre feste Navigation einfügen. Der Header kann Dropdowns enthalten, die sich in einer verschiebbaren, festen Navigationsleiste ebenfalls als unpassend anfühlen.
Anpassen von CSS
Bevor wir uns mit dem kurzen Snippet von JavaScript beschäftigen, möchte ich Ihnen erklären, wie wir diesen Code gestalten können. Zuerst verwende ich einen benutzerdefinierteren Stil für das Zurücksetzen, basierend auf dem ursprünglichen Stylesheet von Eric Meyer. Ich habe die definiert Box-Sizing Eigentum als Border-Box Damit exakte Breitenwerte Margin / Padding enthalten und nicht wie das Standardverhalten erweitern.
Das Hintergrundbild verwendet Debut Dark von der Subtle Patterns-Website. Es gibt viele fantastische, sich wiederholende Texturen, die Sie kostenlos herunterladen können, um die Qualität Ihrer Layouts zu verbessern. Wenn wir uns jedoch der Kernstruktur zuwenden, müssen wir einen Wrapper-Container einrichten, damit der Inhalt des Centers natürlich gefüllt wird. Auch sollte der Hintergrund im Inhaltsbereich weiß erscheinen, jedoch nicht im vollständigen Kopfbereich.
Ich habe einen sehr bunten, sich wiederholenden Hintergrundverlauf im Hauptnavigationsmenü eingerichtet. Bei Verwendung einer festen Höhe für den Balken können wir denselben festen Wert für einstellen Zeilenhöhe Eigenschaften der Listenelemente. Dadurch wird der gesamte Text innerhalb des Navbar-Containers vertikal zentriert. Ich habe ein paar CSS3-Übergangseigenschaften für den Umgang mit einem schlankeren Hover-Status eingefügt.
Die versteckte Navigationsleiste reparieren
Ganz unten in unserem CSS-Stylesheet finden Sie alle Codes, die sich auf unsere feste obere Navigation beziehen. Der Container erstreckt sich über 100% der Seitenbreite, sodass der Balken auf dem gesamten Bildschirm angezeigt wird. Das interne UL-Objekt enthält jedoch alle Links an derselben Position wie unser Inhalt. Auch die Hintergrundfarbe wird mit der rgba () -Syntax für Alphatransparenz angewendet.
Wieder sehen wir eine feste Höhe bei 80px, die im Vergleich zum Original recht groß ist. Aber es erregt Ihre Aufmerksamkeit und die Links sind sehr einfach zu manövrieren. Ich wollte einen ähnlichen Animationseffekt mit CSS3-Übergängen im Hover beibehalten. Die Links füllen also einen weiteren Hintergrund von 30% aus, der dunkler erscheint, aber immer noch transparent für den Inhalt dahinter ist.
Umgang mit JavaScript-Animationen
Ich schaue am Ende unserer Datei index.html vor dem endgültigen Abschluss Etikett. Hier möchte ich ein wenig JavaScript hinzufügen, das die Bildlaufeffekte für das Anzeigen und Ausblenden der festen Navigationsleiste berücksichtigt. Wir können es für das kompliziertere Zeug Zeile für Zeile abbauen.
Der typische jQuery-Aufruf unterbricht die Ausführung des DOM, um das Rendern zu beenden, bevor Codes ausgeführt werden. Wir können auch den ersten Block ignorieren, der die Zeile verwendet e.preventDefault (); zum Anhalten der Ankerglieder vom Laden. Das Wichtigste wird innerhalb des Ereignis-Listeners für erledigt $ (window) .on ('scroll') Dadurch wird jedes Mal eine neue Funktion ausgelöst, wenn der Benutzer nach oben oder unten blättert.
Die Variable? Scrolltop? enthält den Wert in Pixel vom oberen Bildschirmrand. Dies wird jedes Mal aktualisiert, wenn der Benutzer zu einem neuen Ort blättert. Mit diesem Wert können Sie überprüfen, ob der Benutzer über 215px hinaus geblättert hat. Wenn ja, zeigen Sie die ausgeblendete Navigationsleiste an. Wenn sie jedoch um 210 Pixel oder weniger nach oben scrollen, wissen wir, dass die Hauptnavigationsleiste in Sicht kommt. Daher verbergen wir die festgelegte Navigationsleiste und leeren den Bildschirmbereich.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Obwohl dies ein relativ einfacher Effekt ist, kann der Code verwirrend sein, wenn Sie mit JavaScript nicht vertraut sind. Nehmen Sie sich etwas Zeit, um meine Snippets durchzugehen, um sicherzustellen, dass Sie verstehen, wie wir das Menü anzeigen und ausblenden. Fühlen Sie sich auch frei, eine Kopie meines Projekt-Quellcodes herunterzuladen und auf eigene Faust herumzuspielen. Wenn Sie Fragen oder Kommentare zu diesem Tutorial werfen möchten, teilen Sie uns dies im Post-Diskussionsthread mit.