Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Wie man eine schrumpfende feste obere Stange mit Fundament errichtet

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Ein sehr verbreiteter Trend in diesen Tagen ist die Verwendung einer festen Navigation, die weniger schrumpft, wenn der Benutzer die Seite herunterscrollt. In diesem Tutorial zeige ich Ihnen, wie Sie dies erreichen können, indem Sie die Top-Leiste von Zurbs Foundation, einige benutzerdefinierte Sass und jQuery verwenden. Um das Ganze abzurunden, fügen wir ein paar Medienabfragen hinzu, um unser Menü ansprechbar zu machen. Lass uns anfangen!

Bedarf

Sie benötigen ein paar Dinge, um dieses Tutorial zu beherrschen:

  • Grundverständnis der Stiftung Topbar
  • Grundlegendes Verständnis von Foundation und The Grid System
  • Kenntnisse in der Arbeit mit Sass und Compass
  • Ein wenig Erfahrung in der Verwendung von jQuery für einige Ereignisse

Anfangen

Zuerst werden wir unsere Arbeitsumgebung einrichten. Wenn Sie nicht wissen, wie Sie dies mit Compass und Sass tun können, lesen Sie den Abschnitt "Erste Schritte" in Erstellen einer oberen Leiste außerhalb des Canvas-Modus mit Foundation 5.

Erstellen Sie Ihr neues Foundation-Projekt und verwenden Sie die Compass Watch, um Ihr Projekt zu kompilieren. Wir werden unsere eigene style.scss im scss-Ordner für unsere Anpassungen und einige allgemeine Stile erstellen. Mit dieser Konfiguration tauchen wir in die allgemeine HTML-Struktur ein, los geht's!

Einrichten der HTML-Struktur

Schritt 1: Allgemeine Auszeichnung

Wenn Sie ein neues Foundation-Projekt gestartet haben, wechseln Sie zur Datei index.html und entfernen Sie zunächst den gesamten Inhalt zwischen den body-Tags, mit Ausnahme der Skripts unmittelbar vor dem schließenden body-Tag. Fügen Sie dann die folgende Zeile zu Ihrem <head> hinzu, um unsere style.css zu importieren.


Als Nächstes werden wir einige Markups hinzufügen, wie die Kopfzeile, einen Hauptbereich und die Fußzeile, und wir werden auch Dummy-Inhalt hinzufügen, um unserer Seite etwas Fülle zu verleihen.


Hier haben wir einen Header-Abschnitt erstellt, der das <nav>, einen Inhaltsabschnitt und einen Fußzeilenabschnitt enthält. Es gibt ein paar Dinge zu beachten:

  • Unser <nav> hat eine Klasse. Wichtig, .important-class welches wir verwenden werden, um jQuery mitzuteilen, welches Element zum Ziel führen soll, wenn wir runterscrollen.
  • Wir haben ein div mit einer Klasse .header-fill eingefügt. Wir verwenden dies, um etwas Abstand zwischen dem oberen Rand des Browsers und dem Inhaltsabschnitt zu schaffen, da unser Header fest ist und einen höheren Z-Index als der Rest der Elemente auf der Seite aufweist.

Schritt 2: Top Bar Markup

Als nächstes werden wir den HTML-Code für unsere Top-Leiste schreiben. Wir benötigen einen Titelbereich für unser Logo und einen Abschnitt mit einer <ul> Sehen Sie sich den folgenden HTML an:



Wir haben eine <ul> mit dem Klassentitel-Bereich title-area hinzugefügt, wo wir unser Logo behalten. Als nächstes haben wir unsere <section> mit einer Klasse von top-bar-section und eine <ul> mit einer class .right, die alle unsere Listenelemente enthält. Unser Image hat eine ID des logo-image, die wir später in diesem Tutorial auch in unserem jQuery benötigen.

Schritt 3: Ergebnisse bisher

Wenn wir unseren Browser öffnen und zu unserer Indexdatei gehen, werden wir feststellen, dass unser grundlegendes Foundation-Styling uns viel Arbeit abverlangt, damit die Dinge gut aussehen. Unser Logo passt jedoch immer noch nicht. Im nächsten Schritt werden wir das beheben und unserer Header-Navigation ein ordentliches Styling geben.

Sass einrichten

Um die gewünschten Ergebnisse zu erzielen, benötigen wir ein paar grundlegende Stile für unsere Sektionen, insbesondere die Kopfzeile und die obere Leiste. Wir werden Sass nutzen, um es zu verwirklichen.

Schritt 1: Allgemeines Styling

Um zu beginnen, geben wir allen unseren Sektionen ein grundlegendes Styling. Schau dir den Sass unten an:


Wir verwenden hier eine Primärfarbe-Variable, die wir für einige der Top-Bar-Styling verwenden werden. Unsere Header-Sektion hat einen schönen, subtilen Box-Shadow, so dass es aussieht, als ob es über dem Rest des Inhalts schwebt. Indem wir seine Position auf fixed setzen und den Z-Index 999 setzen, sorgen wir dafür, dass die Navigation beim Scrollen nach oben im Browser bleibt und über allen anderen Elementen auf der Seite bleibt.

Unser .contain-to-grid Klasse hat eine subtile transparente weiße Farbe, so dass beim Scrollen der Header so aussieht, als würde der Header über allen anderen Elementen schweben. Wir müssen das Menü jedoch noch anpassen, also kümmern wir uns als nächstes darum.

Schritt 2: Topbar Styling

Jetzt werden wir das Styling hinzufügen, um unserer Top Bar ein schönes, elegantes Aussehen zu geben. Sie könnten auch einige der Einstellungen der oberen Leiste in _settings.scss anpassen, aber ich werde Ihnen zeigen, wie Sie dies mit unseren eigenen benutzerdefinierten Überschreibungen tun können. Der Sass unten erklärt, was passiert wo:

Hinweis: Wir werden den .padding-on-my-header verschieben Klasse unter den Top Bar Regeln. Dies ist notwendig, damit das Padding das der oberen Leiste überschreibt.

Wir haben unserer Top-Leiste etwas Polsterung hinzugefügt, und wir haben einen Übergang von 0.5s auf 0.1s gesetzt. Dies sorgt für einen reibungslosen Übergangseffekt, wenn unsere jQuery einsetzt. Der Hintergrund wird auf none gesetzt, so dass unsere Kopfzeile die leicht transparente Farbe hat, die wir unserem .contain-to-grid gegeben haben Klasse. Der Rest ist ein einfaches Styling für die Top-Bar-Menüpunkte, Drop-Downs, Hover und aktive Zustände. Nichts zu übertrieben, aber es hat uns ein sauberes Ergebnis gegeben, indem wir etwas Polsterung und Leerraum hinzugefügt haben.

Schritt 3: Ergebnisse bisher

Schauen wir uns an, was wir bisher haben. Es fängt sicherlich an, wie etwas auszusehen! Allerdings ist unsere Speisekarte immer noch etwas groß, wenn wir die Seite runterscrollen. Das ist, wo unser .padding-on-my-header Klasse tritt ein.

jQuery für Wirkung

Lassen Sie uns ein wenig jQuery-Magie verwenden, um den .padding-on-my-header hinzuzufügen scrollen Sie und ändern Sie das Logo in ein kleineres.

Schritt 1: Erstellen Sie unsere init.js

Wir werden eine init.js-Datei erstellen, die unseren jQuery-Code enthält. Legen Sie es in Ihren /js Ordner und fügen Sie die folgende Zeile am unteren Ende der Indexdatei direkt vor dem schließenden body-Tag ein, um das Skript einzubinden:

Unsere init.js enthalten Folgendes:

Schauen wir uns an, was hier wirklich passiert. Wenn der Benutzer nach unten scrollt, führen wir folgende Funktion aus: Wenn der Benutzer mehr als 50 Pixel scrollt, verkleinern wir die obere Leiste und fügen ein kleineres Logo ein:

  • Wir finden unser id logo-image und ersetzen die Bildquelle durch die unseres kleineren Logos.
  • Next, we look for our .important-class und fügen Sie eine weitere Klasse hinzu: .padding-on-my-header

Wenn wir wieder hochgehen und unter 50 Pixel scrollen, machen wir das Gegenteil und entfernen die Padding-Klasse, indem wir das große ol-Logo zurückstellen.

Schritt 2: Überprüfen Sie die Ergebnisse

Mach weiter und gehe zurück zum Browser. Aktualisieren Sie die Seite und versuchen Sie, nach unten zu scrollen. Wenn alles wie geplant abgelaufen ist, sollten Sie sehen, dass die obere Leiste mit einem fließenden Übergang schrumpft und das große Logo durch das kleinere ersetzt wird. So weit, ist es gut. Aber wenn wir die Größe unseres Browsers ändern, werden Sie sehen, dass er noch nicht so schnell reagiert. Lass uns das erledigen!

Media Queries für die mobile Optimierung

Wir werden eine Medienabfrage für 1024px-Geräte und kleinere erstellen. Um dies zu erreichen, müssen wir den kleinen Breakpoint von Foundation ändern. Wie sagt man? Nun, das ist einfach! Wir tauchen einfach in unsere _settings.scss ein und suchen nach der folgenden Einstellung:

Wie Sie sehen können, haben wir den kleinen Bereich von 0em - 40em auf 0em - 64em verschoben, was 1024px ergibt; Unsere mittlere Reihe beginnt jetzt bei 64em. Speichern Sie Ihre Einstellungen, damit die Änderungen wirksam werden, und rufen Sie unsere Medienabfrage auf!

Schritt 1: Hinzufügen der Medienabfragen

Unsere Top Bar auf einem kleineren Gerät muss nicht so groß sein. Wir werden es ein wenig verkleinern und unsere Speisekarte neu positionieren. Wir werden auch eine viel kleinere Header-Füllung verwenden. Werfen Sie einen Blick auf die folgenden Stile:

Schauen wir uns an, was wir hier gemacht haben:

  • Wir haben alle Abstände und Ränder in der oberen Leiste entfernt.
  • Wir haben dem Menü-Text und dem Hamburger-Symbol eine graue Farbe anstelle der Standard-Weißfarbe gegeben, so dass sie auf unserer weißen oberen Leiste sichtbar ist.
  • Wir haben unser größeres Logo so angepasst, dass es in die Top Bar passt.
  • In der top-bar-section gestalten wir unsere responsiven Menüpunkte, Hover und aktiven Zustände.
  • Wir verkleinern auch das kleinere Logo und positionieren es neu.
  • In unserem erweiterten Responsive-Menü haben wir einige Abstände und Ränder entfernt.
  • Zuletzt haben wir unsere .header-fill gemacht kleiner, so dass es gleich der Höhe unserer Top Bar ist.

Schritt 2: Genießen Sie Ihre endgültigen Ergebnisse!

Wenn wir zurück zu unserem Browser gehen und die Größe ändern, können wir jetzt sehen, dass unsere reaktionsfähige Navigation in voller Wirkung ist. Scrollen Sie nach unten und sehen Sie, wie sich das Logobild noch ändert. Klicken Sie auf das Menü-Symbol, um die erweiterte Version unserer Responsive-Navigation zu sehen.

Fazit

Mit etwas Sass und jQuery Magie haben wir es geschafft, die mächtige, einfache Top Bar von ZURBs Foundation in einen fantastischen, trendigen, klebrigen Header mit einigen sanften Effekten zu verwandeln. Bereit für Sie, um sie selbst oder die Projekte Ihrer Kunden zu verwenden. Habe Spaß!

Ressourcen

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.