Share
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 eine 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.
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 vorzunehmen.
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? Starten Sie dann Ihren Lieblingseditor und los geht's!
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. Wir wollen hier ein Design mit voller Breite, nichts zu kompliziert, nur um etwas besser zu verstehen, 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 von "voller Breite", dann setzen wir in jedem Bereich ein Div mit einem, ein Div mit einem und. Dadurch wird eine grundlegende Gitterstruktur erstellt.
Hinweis: Weitere Informationen zur Funktionsweise des Rasters finden Sie unter Foundation for Beginners: The Grid System
Foundation-4 Benutzerdefinierte obere Leiste
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Harum, asperiores, voluptas, veniti commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam ei modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam needitatibus odio und perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae bei! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facet quos sai pariatur magni dolorem cum amet nemo quis labourum ipsa dignissimos ducimus inventor modus rem cumque quibusdam quam asperiores! Die Muskulatur ist ein ideales Mittel zur Behandlung der Muskelmasse, aber es ist nicht wichtig, dass sie sich auf dem Weg zu einer Erweckung der Geschwulst in der Nähe des Erholungsortes befinden. Doloribus, Mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!
© 2013
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:
Accentsconagua
nav mitul mitli mit =, um das Menü im mobilen Layout zu erweitern Abschnitt mitul mit und ul mit Lassen Sie uns nun diese Grundlagen aufstellen und die fünf Elemente implementieren.
Hinweis: In diesem Lernbeispiel möchten wir ein benutzerdefiniertes Navigationsmenü erstellen und so den Titel entfernen (der normalerweise das Logo enthält, in Text- oder Bildform). Dazu belassen wir einfach das li mit in der ul mit dem leeren.
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 mit der Klasse "dropdown" ein. 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 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.
Sehen Sie sich die Ergebnisse in Ihrem Browser an. Wir haben jetzt ein grundlegendes Fundament-Framework mit der oberen Leiste eingerichtet, um ein horizontales Menü zu erstellen. Um es an einem anderen Ort als im oberen Bereich des Browsers zu platzieren, müssen Sie einfach das Navis in einer Zeile und in den Spalten div platzieren.
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.
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:
Stiftung 4
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.
body Hintergrundfarbe: #ccc; / ** Legt die Hintergründe für die verschiedenen Abschnitte fest ** / .header-area background-color: # 2d465c; min-Höhe: 160px; .navigation-area background-image: url ('… /img/navigation-container.jpg'); Hintergrundwiederholung: Wiederholung-x; .content-area padding: 50px 0 70px 0; .footer-area Hintergrundfarbe: # 1f1f1f; Farbe: #fff; min-Höhe: 50px; Auffüllen: 20px 0 0 0; . volle Breite min-Breite: 100%; Position: relativ; h2 color: #fff; Schriftgewicht: normal; Rand oben: 50px; 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 etwas von dem schwarzen Hintergrund in der .top-bar-Klasse und den Abschnittslisten und ändern die Höhe und die Zeilenhöhe in 58px (Höhe des Navigationsbereichs). Lesen Sie die Kommentare für weitere Erklärungen.
/ ** Ändert die Hintergrundfarbe, die Höhe und den Rand des Rahmens. ** / .Top-Bar Hintergrund: keine; Höhe: 58px; Zeilenhöhe: 58px; Rand unten: 0; / ** Entfernt schwarzen Hintergrund in der Menüleiste ** / .top-bar-section ul background: none; Text-Transformation: Großbuchstaben; / ** Entfernt schwarzen Hintergrund im Menüelement ** / .Top-Bar-Abschnitt. Li a: not (.button) background: none; Zeilenhöhe: 58px; Polsterung: 0 27px;
Wir haben den standardmäßigen schwarzen Hintergrund aus dem Navigationsbereich, 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:
/ ** Ändert das aktive Menüelement vom Standardschwarz in einen Farbverlauf. ** / .top-bar-section ul li.active> a background: rgb (0, 0, 0); Hintergrund: linearer Gradient (nach unten, rgba (0, 0, 0, 0,4) 0%, rgba (0, 0, 0, 0,7) 100%) Wiederholungslauf 0 0 transparent; Farbe: #fff; / ** Ändert den Schwebeflugstatus von nicht aktiven Menüelementen. ** / .Top-Bar-Abschnitt li: hover a Hintergrund: linearer Gradient (nach unten, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) Scroll wiederholen 0 0 transparent; Farbe: #fff; / ** Ändert die Textfarbe für nicht aktive Menüelemente in Schwarz. ** / .Top-Bar-Abschnitt ul li> a color: # 2d2d2d; / ** Ändert den Hover-Status der Dropdown-Menüelemente ** / .top-bar-section ul.dropdown li a: hover: nicht (.button) Hintergrund: keine Wiederholung scrollen 0 0 rgba (0, 0, 0, 0,9); / ** WICHTIG füllen für den ul-Dropdown-Container ** / .top-bar-section ul.dropdown background: # 333; Farbe: #fff; / ** Hiermit werden die Position und die Farbe des Dropdownpfeils festgelegt. ** / .top-bar-section .has-dropdown> a: after border-color: rgba (0, 0, 0, 1) transparent transparent; Rand oben: 2,5px;
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 am .Top-Bar-Abschnitt li: hover a behält den Status des Dropdown-Menüs bei, 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 Leistenabschnitt neu positioniert.
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.
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.
@media only screen und (max-width: 942px) / * Passt das responsive Menü in den Navigationscontainer und ändert den Hintergrund in Schwarz. * / .Top-Bar ul Hintergrundfarbe: rgba (0, 0, 0, 0,5); Polsterung unten: 13px; / * Nicht aktive Menüelementfarbe in Schwarz ändern * / .top-bar-section ul li> a color: #fff; / * Gibt der Dropdown-Liste eine schwarze Füllung aus * / .top-bar-section ul background: # 000; / * Geben Sie die BACK-Taste an, nachdem Sie in einem Untermenü die entsprechende Füllung aufgerufen haben. * / .Top-bar-section .dropdown li.title h5 a Zeilenhöhe: 57px; / * Hiermit werden Position und Farbe des Dropdownpfeils festgelegt. * / .Top-bar-section .has-dropdown> a: after border-color: rgba (255, 255, 255, 1) transparent transparent; Rand oben: 2,5px; / * Medienabfrage beenden * /
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.
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ß!
