Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Erstellen Sie eine Top-Bar-Off-Canvas-Navigation mit Foundation 5

by
Length:LongLanguages:

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

In einem früheren Tutorial haben wir gelernt, wie Sie die Top-Leiste von Foundation 4 mithilfe von CSS anpassen können.  Seitdem hat ZURB Foundation 5 veröffentlicht; schneller, schlanker und leistungsfähiger als sein Vorgänger. Bemerkenswert ist auch, dass ZURB die Off Canvas-Funktionalität wiederhergestellt hat, die in Foundation 3 zu finden ist.

Heute werden wir die Off-Canvas-Funktion mit unserer Top-Bar-Navigation kombinieren. Das Ergebnis wird eine nette benutzerdefinierte Navigation für Desktop-Benutzer und ein schlankes Off-Canvas-Menü für Tablet- und mobile Benutzer sein.

Hinweis: Die Funktionalität, die wir hier verwenden, funktioniert nicht für IE8 und niedriger. Ich habe ein Update für IE9 in den Ressourcen am Ende des Tutorials enthalten.

Bedarf

Um diesem Tutorial folgen zu können, benötigen Sie einige Zwischenerfahrungen:

  • Grundlegendes Verständnis von Foundation und The Grid System
  • Kenntnisse in der Arbeit mit einem Sass und Compass Foundation Projekt

Anfangen

Einrichten der Umgebung

Wenn Sie das nicht bereits getan haben, richten Sie Compass und Sass mit der Foundation Sass-Dokumentation ein, wenn Sie eine Anleitung benötigen. Wenn Sie dies bereits getan haben, finden Sie hier die schnelle Einrichtung zum Erstellen eines neuen Foundation 5-Projekts mithilfe der Eingabeaufforderung:

Ruby-Eingabeaufforderung

Gehe in dein bevorzugtes Verzeichnis

cd c:/user/your-working-environment

Verwenden Sie diesen Befehl, um Ihr Projekt zu erstellen

Gründung neues Ihr-Projekt

Gehe zu deiner neu erstellten Projektdatei

Ihr CD-Projekt

Und benutze diesen Befehl, um den Kompass zu erhalten, um deine Sass-Dateien anzusehen und zu kompilieren

Kompass Uhr

Wenn alles erfolgreich verlaufen ist, sollte Ihr Verzeichnis in etwa so aussehen:

Stiftung 5 Projektverzeichnis

Nur eine Sache bleibt und das ist unsere style.scss zu erstellen. Dazu erstellen Sie eine neue Datei im Ordner "scss" und benennen diese Datei style.scss. Wir werden diese Datei später brauchen. Wenn Sie Compass ausführen, sollte Ihre style.scss bereits in eine style.css-Datei in Ihrem Stylesheets-Ordner kompiliert sein. Großartig, wir haben alles eingerichtet, beginnen wir mit der Programmierung unserer allgemeinen HTML-Struktur.

Einrichten der HTML-Struktur

Schritt 1: Allgemeine Auszeichnung

Öffnen Sie Ihre index.html und entfernen Sie den gesamten Inhalt zwischen den body-Tags, mit Ausnahme der Skripte direkt vor dem . Wir brauchen sie, damit alle Foundation-Funktionen funktionieren. Zweitens, gehen Sie voran und fügen Sie die folgende Codezeile in hinzu, um sicherzustellen, dass wir unsere CSS-Datei laden.

Mit dieser Konfiguration fügen wir einige Abschnitte hinzu und stellen unserer Seite Dummy-Inhalte zur Verfügung. Wir beginnen mit einigen Grundlagen, indem wir eine Kopfzeile, einen Hauptteil, einen Service, eine Call-to-Action, eine Fußzeile und einen Copyright-Bereich hinzufügen.

Hier haben wir einen Header-Abschnitt mit einem Logo hinzugefügt, dann einen Hauptabschnitt, der in den Inhaltsbereich unterteilt ist, drei Dienste und einen Aufruf zum Handeln. Schließlich gibt es einen Fußzeilenbereich mit drei Spalten und einem Copyright-Bereich. Straight-Forward-Markup bis jetzt, lasst uns zur Top-Leiste kommen!

Schritt 2: Top Bar Markup

Wir werden unsere Top-Leiste in einem Abschnitt mit dem Klassen navigation sabschnitt für Styling-Zwecke einwickeln. Wir geben diesem Abschnitt auch eine andere Klasse: Show-for-large-up. Dadurch wird sichergestellt, dass die obere Leiste nur für Geräte mit einer bestimmten Mindestbreite und höher angezeigt wird. Dies ist eine der vielen Sichtbarkeitsklassen, die uns von Foundation zur Verfügung gestellt werden (Sie können mehr darüber in der Foundation-Komponentendokumentation lesen).  Jetzt für das Markup:

Hinweis: Fügen Sie die Daten-Topbar in Ihr Nav ein. Auf diese Weise stellen wir sicher, dass das JavaScript für die obere Leiste ordnungsgemäß funktioniert (z. B. das Dropdown-Menü).

Schritt 3: Off-Canvas-Markup

Unser Off-Canvas-Menü wird über die Grenzen des Ansichtsfensters hinaus verborgen. In dem Moment, in dem wir das Menü drücken, wird Offcanvas eingeblendet (in unserem Fall von links) und den Inhalt der Seite nach rechts verschieben. In unserem Setup werden wir die Kopf- und Fußzeile in dieser Bewegung ausschließen. Nur der Inhaltsbereich wird zur Seite verschoben und die Kopf- und Fußzeile wird beibehalten.

Wenn Sie nach unten scrollen, erscheint unsere Kopfzeile (die ein Logo und möglicherweise andere Inhalte enthalten kann) oben auf der Seite (Hinweis: Die Seite sollte genügend Inhalt enthalten, damit dies funktioniert, da ansonsten auch der Fußzeilenbereich verwendet würde schweben über unserem Offcanvas-Menü). Das bedeutet, dass wir außerhalb des Canvas um unseren Hauptinhaltsabschnitt "wickeln" müssen. Fügen Sie nach der Navigation in der oberen Navigationsleiste und vor unserem Hauptinhaltsabschnitt den folgenden HTML-Code ein:

Lassen Sie es brechen. Fügen Sie nach der Navigation in der oberen Navigationsleiste und vor unserem Hauptinhaltsabschnitt den folgenden HTML-Code ein: Lass es uns kaputt machen. Wir haben zwei div-Elemente erstellt. eine mit der Klasse Off-Canvas-Wrap und eine mit der Klasse Inner Wrap. Der Off-Canvas-Wrapper blendet unseren Inhalt aus, bis die Menüschaltfläche gedrückt wird. Der innere Wrap enthält unsere Navigationsmenüleiste, das linke Off-Canvas-Menü und den Hauptinhaltsabschnitt. Wir haben dem Nav eine Klasse von Verstecken für Großaufnahmen gegeben, um sicherzustellen, dass es nur für mittlere und kleine Geräte angezeigt wird. Indem wir der Seite ein Link-Off-Canvas-Menü geben, stellen wir sicher, dass unser Off-Canvas-Menü auf der linken Seite des Bildschirms erscheint. Die Menüelemente in unserem Off-Canvas-Menü ähneln denen der oberen Leiste.

Alles, was noch zu tun ist, ist, dem Benutzer eine Möglichkeit zu geben, das Offcanvas-Menü zu schließen. Danach schließen wir die Off-Canvas-Wrap- und die Inner-Wrap-Divs. Fügen Sie dieses Recht hinzu, nachdem Sie den Hauptabschnitt geschlossen haben.

Schritt 4: Ergebnisse bisher

Öffnen wir unseren Browser und suchen Sie die Datei index.html, die wir gerade bearbeitet haben. Das Ergebnis sollte in etwa den folgenden Screenshots entsprechen (probieren Sie es aus, ändern Sie die Größe Ihres Browsers!)

HTML-Oberleiste
HTML Off-Canvas

Sass einrichten

Alles in allem haben wir eine voll funktionsfähige obere Leiste für Desktop-Benutzer und ein nettes, schlankes Menü für Benutzer kleinerer Geräte wie Tablets und Telefone. Allerdings sieht unsere Seite noch nicht wirklich wie eine echte Webseite aus, also lassen Sie uns etwas hinzufügen.

Schritt 1: Allgemeines Styling

Zuerst geben wir unseren allgemeinen Abschnitten (Kopfzeile, Navigation, Haupt-, Fußzeile und Copyright) eine Farbe. Wir geben unserem Körper auch eine subtile Hintergrundfarbe und machen eine Vollbreitenklasse, damit die Breite auf 100% gesetzt wird. Im HTML-Code haben wir die gesamte Klasse den verschiedenen Abschnitten hinzugefügt, um sicherzustellen, dass sie sich an die Grenzen des Browsers anpassen. Schau dir den Sass unten an:

Hinweis: Um den Starry BG hinzuzufügen, laden Sie die Quelldateien herunter!

Wir haben unserem Design ein wenig mehr Platz zum Atmen gegeben, indem wir etwas Polsterung hinzugefügt haben, und wir haben ein Design in voller Breite entwickelt, indem wir allen Abschnitten eine Hintergrundfarbe und eine Mindestbreite von 100% gegeben haben. Wir gaben den Menüpunkten auch eine Großbuchstaben-Text-Transformation.

Schritt 2: Top Bar Stile mit _settings.scss

Um unsere obere Leiste zu stylen, tauchen wir in die Datei _settings.scss ein. Verwenden Sie je nach verwendetem Code-Editor die Option Suchen und geben Sie "Topbar" ein. Hier finden Sie alle Einstellungen, um die Standardoberleiste zu ändern. Für dieses Tutorial verwenden wir zwei verschiedene Optionen. eine, um unserer oberen Leiste ein wenig mehr Höhe zu geben und eine andere, um die Schriftgröße ein wenig zu erhöhen. Kommentieren und ändern Sie die folgenden zwei Einstellungen:

Schritt 3: Off-Canvas-Stile Mit _setting.scss

Wir verwenden auch die Einstellungsdatei, um unser Off-Canvas-Menü anzupassen. Das standardmäßige Off-Canvas-Markup ist ziemlich gut, aber stellen wir sicher, dass der Navigationsbereich dieselbe Höhe wie der Navigationsbereich unserer oberen Leiste hat. Zusätzlich dazu müssen wir das Hamburger-Icon ein wenig verschieben, damit es von oben zentriert bleibt. Suchen und geben Sie in der Einstellungsdatei "Off-Canvas" ein. Kommentieren und ändern Sie die folgenden zwei Einstellungen:

Schritt 4: Genießen Sie Ihre Ergebnisse

Speichern Sie die Datei, kompilieren Sie Ihre Dateien und aktualisieren Sie Ihren Browser. Jetzt hat unsere Seite ein wenig mehr Saft und es wird alles von der großen Top-Bar und Off-Canvas angetrieben! Ihre Ergebnisse sollten etwa so aussehen:

Sass Topbar
Sass Offcanavs

Fazit

Wir haben eine nette, reaktionsschnelle Seite mit der Top-Leiste von Foundation und Off-Canvas erstellt und ein bisschen Sass-Styling hinzugefügt, um es mit der _settings.scss-Datei zu sättigen.

Natürlich können wir viel mehr mit den _settings.scss tun, als ich gerade demonstriert habe. Machen Sie weiter und spielen Sie mit den Einstellungen herum, um zu sehen, wie einfach Sie die Foundation-Elemente in Ihrer Site anpassen können, oder probieren Sie sie in dieser Demo aus, um Ihr Menü mit der oberen Leiste / Off-Canvas weiter anzupassen. 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.