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

So passen Sie die obere Leiste der Foundation 4 an

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Zurb's Foundation 4 verfügt über eine brillante Topbar, die beinahe symbolisch für den Aufbau einer Foundation-Website ist. Heute werden wir uns ansehen, wie Sie es auf andere Weise implementieren können, indem Sie es an einer anderen Stelle auf der Seite platzieren, um Ihnen ein benutzerdefiniertes und ansprechendes horizontales Navigationsmenü zu geben.


Fertig machen

Zunächst brauchen wir die neueste Stiftung. Entpacken Sie alle Dateien und legen Sie sie in Ihrem Arbeits- oder Testverzeichnis ab. Wir verwenden nur index.html, um unsere eigene style.css zu erstellen, in der wir die verschiedenen Klassen der oberen Leiste überschreiben, um unsere benutzerdefinierte Navigation zu erstellen.

foundation-download

Laden Sie auch das oben angegebene Hintergrundbild herunter. Wir werden dies für das Menü verwenden, also legen Sie es in Ihrem "img" -Ordner ab. Alles haben? Dann starten Sie Ihren Lieblingseditor und los geht's!


Einrichten der HTML-Struktur

Schritt 1: Allgemeine Markup

Die Indexdatei in Ihrem Download enthält voreingestelltes HTML. Sie können alles so belassen, wie Sie es im Header-Tag finden, und Sie können die Skript-Links (vor dem schließenden Body-Tag) dort belassen, wo sie sind. Wir brauchen das alles, um sicherzustellen, dass das Gitter und die obere Leiste tatsächlich funktionieren. Sie können den Rest des Dummy-Inhalts löschen. 

Sie können den Rest des Dummy-Inhalts löschen. Wir wollen hier ein Design mit voller Breite, nichts zu kompliziertes, nur etwas, um eine bessere Vorstellung davon zu bekommen, womit wir arbeiten.

In Ordnung, lassen Sie uns die Kopfzeile, die Navigation, den Inhalt und den Fußzeilenbereich einrichten und einen Dummy-Inhalt zum Füllen einfügen.  Wir geben jedem Bereich eine Klasse mit "voller Breite", dann setzen wir in jedem Bereich ein div mit einer Klasse = "Zeile", einem Div mit einer Klasse = "large-12" und class = "Spalten". Dadurch wird eine grundlegende Gitterstruktur erstellt.

Hinweis: Weitere Informationen zur Funktionsweise des Rasters finden Sie unter Grundlagen für Anfänger: Das Rastersystem

Schritt 2: Top Bar Markup

Bevor wir mit dem Styling beginnen, werden wir die grundlegende HTML-Struktur festlegen, damit die Foundation Top Bar ordnungsgemäß funktioniert. Wir benötigen fünf grundlegende Elemente, um den Motor zum Laufen zu bringen:

  • nav mit class="top-bar"
  • ul mit class="title-area"
  • li mit class = "toggle-topbar" = um das Menü im mobilen Layout zu erweitern
  • section mit class="top-bar-section"
  • ul mit class="left" und ul mit class="right"

Lassen Sie uns nun diese Grundlagen aufstellen und die fünf Elemente implementieren.

Hinweis: In diesem Lernbeispiel möchten wir ein benutzerdefiniertes Navigationsmenü erstellen, um den Titel darin zu entfernen (der normalerweise das Logo enthält, in Text- oder Bildform). Dazu lassen wir einfach das li mit class = "name" in der ul mit dem class = "title-area" leer.

Fügen wir noch einige Menüelemente und ein Dropdown-Menü hinzu, während wir gerade dabei sind. Um eine Dropdown-Liste hinzuzufügen, fügen Sie die Klasse "has-dropdown" dem li-Element hinzu, in dem die Dropdown-Liste enthalten sein soll. Bringen Sie dann eine neue ul-Klasse mit der Klasse "dropdown" hinzu.  Um die aktuell aktive Seite anzuzeigen, können wir unserem aktuellen Menüpunkt eine Klasse von "aktiv" auf dem Element li geben. Wir können die ul class = "right" leer lassen.  Normalerweise würden Sie in diesem Bereich eine Schaltfläche oder ein Eingabeformular für die Suche hinzufügen. Weitere Informationen zu den Markierungen der oberen Leiste finden Sie unter Grundlagen für Anfänger: Die obere Leiste.

Schauen Sie sich das folgende HTML an, die Kommentare erklären, wie es aufgebaut wird.

Schritt 3: Bisherige Ergebnisse

Sehen Sie sich die Ergebnisse in Ihrem Browser an. Wir haben jetzt ein grundlegendes Fundament-Framework mit der oberen Leiste zum Erstellen eines horizontalen Menüs eingerichtet.  Um es an einer anderen Stelle als im oberen Bereich des Browsers zu platzieren, setzen Sie einfach die nav-Klasse = "top-bar" in eine Zeile und Spalten div.

Wenn Sie die Größe des Browsers ändern, können Sie feststellen, dass sich das Menü am vordefinierten Haltepunkt ändert.

Der nächste Schritt besteht darin, dem Benutzer ein individuelles Styling zu geben. Wir werden uns darauf konzentrieren, wie wir die Top Bar gestalten können und welche Klassen dafür verwendet werden.

foundation-4-custom-top-bar-html-layout

CSS einrichten

Schritt 1: Allgemeines Styling

Falls noch nicht geschehen, erstellen Sie eine neue CSS-Datei, nennen Sie sie style.css und legen Sie sie im Ordner css Ihres Foundation-Downloads ab. Vergessen Sie nicht, es in das Header-Tag in Ihre Indexdatei aufzunehmen, indem Sie es wie folgt unter der foundation.css referenzieren:

Wenn Sie es nicht unter foundation.css platzieren, werden die Klassen der oberen Leiste nicht überschrieben.

In Ordnung, lassen Sie uns zunächst einige grundlegende Gestaltungsmöglichkeiten in den Bereichen Kopfzeile, Navigation, Inhalt und Fußzeile erhalten. Für den Navigationsbereich verwenden wir ein Hintergrundbild, das Sie zuvor heruntergeladen haben.  Das generelle Design ist nicht sehr groß, schauen Sie sich das CSS unten an. Wir fügen jedem Bereich eine Klasse voller Breite hinzu, um sicherzustellen, dass er die volle Breite des Browsers ausfüllt. 

Schritt 2: Top Bar Styles

Wenn Sie sich jetzt die Ergebnisse ansehen, wirkt das Menü immer noch etwas unpassend. Das liegt daran, dass immer noch das Standard-CSS verwendet wird. Lass es uns regeln!

Es gibt einige CSS-Klassen, die wir ansprechen müssen, um die gewünschten Ergebnisse zu erzielen.  Zuerst entfernen wir einen Teil des schwarzen Hintergrunds in der .top-bar-Klasse und den Abschnittslisten und ändern die Höhe und Zeilenhöhe in 58px (Höhe des Navigationsbereichs). Lesen Sie die Kommentare für weitere Erklärungen.

Wir haben den standardmäßigen schwarzen Hintergrund aus der nav-Klasse = "top-bar", den Abschnittslisten und den Menü-Ankern entfernt. Wir passen die Höhe, die Zeilenhöhe und den Abstand an und wandeln den Text in Großbuchstaben um, damit er in unser individuelles Design passt.

Wenn Sie Ihren Browser aktualisieren, werden Sie feststellen, dass er Gestalt annimmt. Lassen Sie uns mit den Dropdowns, Menüpunkten, aktiven Zuständen und Schwebeflügen fortfahren. Schauen Sie sich das CSS unten an und lesen Sie nochmals den kommentierten Text zur Erklärung:

Wir haben hier einige Änderungen an unserem Menü vorgenommen. Zunächst haben wir den schwarzen Standardhintergrund des aktiven Menüelements in einen CSS-Verlauf geändert. Dann haben wir den nicht aktiven Menüpunkten einen Umbenennungszustand gegeben.  Um die nicht aktiven Menüpunkte deutlicher sichtbar zu machen, ändern wir die Textfarbe in ein dunkles Grau. Die Änderungen, die in der oberen .top-bar-section li:hover a hält den Status des Dropdown-Menüs aufrecht, wenn der Mauszeiger über die Dropdown-Elemente bewegt wird.  Um das CSS zu vervollständigen, haben wir dem ul-Dropdown-Container eine Hintergrundfüllung gegeben und die Standardposition des Dropdown-Pfeils aufgrund unserer Auffüllanpassungen im oberen Teil der Leiste neu positioniert. 

Schritt 3: Bisherige Ergebnisse

Aktualisieren Sie Ihren Browser und sehen Sie sich die bisherigen Ergebnisse an. Wir sind noch nicht ganz fertig. Wir müssen immer noch sicherstellen, dass alles gut aussieht, wenn wir die Bildschirmgröße Ihres Browsers ändern (oder, wenn wir es auf einem kleineren Gerät betrachten).  Um dies zu erreichen, fügen wir unserer CSS-Datei einige Medienabfragen hinzu.


Einrichten der Medienabfragen

Schritt 1: Medienabfragen

Es gibt einige Dinge, die wir anpassen müssen, damit das Menü mit unserem benutzerdefinierten Design funktioniert, wenn die Bildschirmgröße reduziert wird.  Dies beinhaltet meistens das Hinzufügen von Füllungen, Zeilenhöhen, Textfarben und Hintergrundfarben. Schauen Sie sich das CSS unten an und schauen Sie sich die Kommentare an, um eine Erklärung für jeden Abschnitt zu erhalten.

Schritt 2: Genießen Sie Ihre Ergebnisse

Speichern Sie die Datei, aktualisieren Sie Ihren Browser und spielen Sie mit der Browsergröße. Wie Sie sehen, passt das Menü gut in unser Design.

foundation-4-custom-top-bar-final-product-responsive

Fazit

Das alles rundet unser Tutorial darüber, wie wir mit der Top-Leiste des Foundation 4-Frameworks ein benutzerdefiniertes responsives Menü erstellen können.  Denken Sie daran, dass das Menü nicht oben auf der Seite stehen muss. Wickeln Sie es einfach in eine eigene Zeile und Spalte div ein, dann können Sie es praktisch überall platzieren, wo Sie möchten!

Foundation ist ein großartiges Werkzeug, um schnell reagierende Designs zu entwickeln, und wenn Sie sich auskennen, können Sie es so gestalten, wie Sie möchten. Habe Spaß!

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.