So passen Sie die obere Leiste der Foundation 4 an

() translation by (you can also view the original English article)

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

Fertig machen

Zunä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 überschreiben, um unsere benutzerdefinierte Navigation zu erstellen.

Laden Sie auch das oben angegebene Hintergrundbild herunter. Wir werden dies für das Menü 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 enthält voreingestelltes HTML. Sie können alles so belassen, wie Sie es im Header-Tag finden, und Sie kö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 tatsächlich funktionieren. Sie können den Rest des Dummy-Inhalts löschen.

Sie können den Rest des Dummy-Inhalts lö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 Füllen einfü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 für Anfänger: Das Rastersystem


<!-- HEADER AREA -->
<header class="full-width header-area">
  <div class="row">
		<div class="large-12 columns">
			<h2>Foundation-4 Custom Top Bar</h2>
		</div>
	</div>
</header> 

<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
	<div class="row">
		<div class="large-12 columns">
							
			<nav class="top-bar"></nav>
		</div>
	</div>
</div>

<!-- CONTENT AREA -->
<div class="full-width content-area">
	<div class="row">
		<div class="large-12 columns">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>
		</div>
	</div>
</div>

<!-- FOOTER AREA -->
<div class="full-width footer-area">
	<div class="row">
		<div class="large-12 columns">
			&copy; 2013
		</div>
	</div>
</div>

Schritt 2: Top Bar Markup

Bevor wir mit dem Styling beginnen, werden wir die grundlegende HTML-Struktur festlegen, damit die Foundation Top Bar ordnungsgemäß funktioniert. Wir benötigen fü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 Menü 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 fünf Elemente implementieren.

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

Fügen wir noch einige Menüelemente und ein Dropdown-Menü hinzu, während wir gerade dabei sind. Um eine Dropdown-Liste hinzuzufügen, fü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, können wir unserem aktuellen Menüpunkt eine Klasse von "aktiv" auf dem Element li geben. Wir können die ul class = "right" leer lassen. Normalerweise würden Sie in diesem Bereich eine Schaltfläche oder ein Eingabeformular für die Suche hinzufügen. Weitere Informationen zu den Markierungen der oberen Leiste finden Sie unter Grundlagen für Anfänger: Die obere Leiste.

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


<!-- Nav Wrap --> 
<nav class="top-bar">
	<ul class="title-area">
	<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<!-- The Section wrap -->
	<section class="top-bar-section">
	
		<!-- Left Nav Section -->
		<ul class="left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Prices</a></li>
			<li class="has-dropdown">
				<a href="#">Features</a>
				<ul class="dropdown">
					<li><a href="#">Modalboxes</a></li>
					<li><a href="#">Submenu's and navigation</a></li>
					<li><a href="#">Price tables</a></li>
					<li><a href="#">Buttons</a></li>
					<li><a href="#">Button groups</a></li>
					<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
					<li><a href="#">Alert boxes</a></li>
					<li><a href="#">Columns</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right"></ul>

	</section>
</nav>

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 Menü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 Größe des Browsers ändern, können Sie feststellen, dass sich das Menü am vordefinierten Haltepunkt ändert.

Der nächste Schritt besteht darin, dem Benutzer ein individuelles Styling zu geben. Wir werden uns darauf konzentrieren, wie wir die Top Bar gestalten können und welche Klassen dafür verwendet werden.

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:


<head>
    <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 	<title>Foundation 4</title>

 	<link rel="stylesheet" href="css/foundation.css">
 	<link rel="stylesheet" href="css/style.css">
 
 	<script src="js/vendor/custom.modernizr.js"></script>
</head>

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

In Ordnung, lassen Sie uns zunächst einige grundlegende Gestaltungsmöglichkeiten in den Bereichen Kopfzeile, Navigation, Inhalt und Fußzeile erhalten. Fü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 fügen jedem Bereich eine Klasse voller Breite hinzu, um sicherzustellen, dass er die volle Breite des Browsers ausfüllt.


body {
	background-color: #ccc;
}

/** Set the backgrounds for the different sections **/
.header-area {
    background-color: #2d465c;
    min-height: 160px;
}

.navigation-area {
	background-image: url('../img/navigation-container.jpg');
	background-repeat: repeat-x;
}

.content-area {
	padding: 50px 0 70px 0;
}

.footer-area {
    background-color: #1f1f1f;	
    color: #fff;
	min-height: 50px;
	padding: 20px 0 0 0;
}

.full-width {
	min-width:100%;
	position: relative;
}

h2 {
	color: #fff;
	font-weight: normal;
	margin-top: 50px;
}

Schritt 2: Top Bar Styles

Wenn Sie sich jetzt die Ergebnisse ansehen, wirkt das Menü 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 müssen, um die gewünschten Ergebnisse zu erzielen. Zuerst entfernen wir einen Teil des schwarzen Hintergrunds in der .top-bar-Klasse und den Abschnittslisten und ändern die Höhe und Zeilenhöhe in 58px (Höhe des Navigationsbereichs). Lesen Sie die Kommentare für weitere Erklärungen.


/** Changes background color, height and margin of the border **/
.top-bar {
    background: none;
    height: 58px;
    line-height: 58px;
    margin-bottom: 0;
}

/** Removes black background on menu bar **/
.top-bar-section ul {
    background: none;
    text-transform: uppercase;
}

/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
    background: none;
    line-height: 58px;
    padding: 0 27px;
}

Wir haben den standardmäßigen schwarzen Hintergrund aus der nav-Klasse = "top-bar", den Abschnittslisten und den Menü-Ankern entfernt. Wir passen die Höhe, die Zeilenhö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, Menüpunkten, aktiven Zuständen und Schwebeflügen fortfahren. Schauen Sie sich das CSS unten an und lesen Sie nochmals den kommentierten Text zur Erklärung:


/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
    background:  rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
    color: #2d2d2d;
}

/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}

/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
    background: #333;
    color: #fff;
}

/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 1) transparent transparent;
    margin-top: 2.5px;
}

Wir haben hier einige Änderungen an unserem Menü vorgenommen. Zunächst haben wir den schwarzen Standardhintergrund des aktiven Menüelements in einen CSS-Verlauf geändert. Dann haben wir den nicht aktiven Menüpunkten einen Umbenennungszustand gegeben. Um die nicht aktiven Menüpunkte deutlicher sichtbar zu machen, ändern wir die Textfarbe in ein dunkles Grau. Die Änderungen, die in der oberen .top-bar-section li:hover a hält den Status des Dropdown-Menüs aufrecht, wenn der Mauszeiger über die Dropdown-Elemente bewegt wird. Um das CSS zu vervollständigen, haben wir dem ul-Dropdown-Container eine Hintergrundfüllung gegeben und die Standardposition des Dropdown-Pfeils aufgrund unserer Auffü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 müssen immer noch sicherstellen, dass alles gut aussieht, wenn wir die Bildschirmgröße Ihres Browsers ändern (oder, wenn wir es auf einem kleineren Gerät betrachten). Um dies zu erreichen, fügen wir unserer CSS-Datei einige Medienabfragen hinzu.

Einrichten der Medienabfragen

Schritt 1: Medienabfragen

Es gibt einige Dinge, die wir anpassen müssen, damit das Menü mit unserem benutzerdefinierten Design funktioniert, wenn die Bildschirmgröße reduziert wird. Dies beinhaltet meistens das Hinzufügen von Füllungen, Zeilenhöhen, Textfarben und Hintergrundfarben. Schauen Sie sich das CSS unten an und schauen Sie sich die Kommentare an, um eine Erklärung für jeden Abschnitt zu erhalten.


@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */
    .top-bar ul {
        background-color: rgba(0, 0, 0, 0.5);
        padding-bottom: 13px;
    }

    /* Change non active menu item color to black */
    .top-bar-section ul li > a {
        color: #fff;
    }

    /* Gives the dropdown ul a black fill */
    .top-bar-section ul {
        background: #000;
    }

    /* Give the BACK button after going in a submenu the appropriate filling */
    .top-bar-section .dropdown li.title h5 a {
        line-height: 57px;
    }

    /* This fixes the position and the color of the dropdown arrow */
    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(255, 255, 255, 1) transparent transparent;
        margin-top: 2.5px;
    }

} /* end media query */

Schritt 2: Genießen Sie Ihre Ergebnisse

Speichern Sie die Datei, aktualisieren Sie Ihren Browser und spielen Sie mit der Browsergröße. Wie Sie sehen, passt das Menü gut in unser Design.

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

Fazit

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

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