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

() translation by (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:

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:

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.

1	<link rel="stylesheet" href="stylesheets/style.css" />

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.

<!-- HEADER SECTION -->
<header>
  <div class="row">
	    <div class="small-12 medium-12 large-12 columns">
			<div class="logo">
				<h1>Foundation 5 Topbar / Offcanvas menu</h1>
			</div> <!-- END DIV.LOGO -->
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</header> <!-- END HEADER -->

<!-- MAIN SECTION -->
<section class="main-section">
	<!-- CONTENT SECTION -->
	<section class="full-width content-section">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<h2>Moving aside for the Offcanvas people!</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
			</div> <!-- END 12 COLUMNS -->
		</div> <!-- END ROW -->
	</section> <!-- END SECTION.CONTENT-SECTION -->

	<!-- SERVICES SECTION -->
	<section class="full-width services-section">
		<div class="row">
			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
			</div>

		</div> <!-- END ROW -->
	</section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

	<!-- CALL 2 ACTION -->
	<section class="full-width call-to-action">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<a href="#" class="button radius">Get in touch with us!</a>
			</div>
		</div>
	</section>
</section> <!-- END SECTION.MAIN-SECTION -->

<!-- FOOTER SECTION -->
<footer>
	<div class="row">
    	<div class="small-12 medium-4 large-4 columns">
		    <h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>
	</div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
	<div class="row">
	    <div class="small-12 columns">
			<p>&copy; 2014</p>
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->

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:

<!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
	<div class="row">
		<div class="large-12 columns">
			
            <!-- TOP BAR INITIALIZATION -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1></h1>
					</li>
				</ul> <!-- END UL.TITLE-AREA -->

				<!-- TOP BAR MENU ELEMENTS -->
				<section class="top-bar-section">
					<ul class="left">
						<li class="active"><a href="index.html">Home</a></li>
						<li class="has-dropdown">
							<a href="blog.html">Blog</a>
							<ul class="dropdown">
								<li><a href="blog.html">Archive</a></li>
								<li><a href="post.html">Single</a></li>
							</ul>
						</li>
						<li class="has-dropdown">
							<a href="page.html">Page</a>
							<ul class="dropdown">
								<li><a href="page.html">Full-wdith</a></li>
								<li><a href="sidebar-left.html">Left Sidebar</a></li>
								<li><a href="sidebar-right.html">Right Sidebar</a></li>
							</ul>
						</li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li class="has-dropdown">
							<a href="#">Dropdown</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
								<li><a href="#">Second link in dropdown</a></li>
								<li><a href="#">Third link in dropdown</a></li>
							</ul>
						</li>
					</ul>
				</section> <!-- END SECTION.TOP-BAR-SECTION -->
			</nav> <!-- END NAV.TOP-BAR -->

		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->

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:

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap">
    <div class="inner-wrap">

		<!-- OFF CANVAS MENU BAR -->
		<nav class="tab-bar hide-for-large-up">

			<section class="left-small">
				<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>

			<section class="right tab-bar-section">
				<h1 class="title">Menu</h1>
			</section>

		</nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->

		<!-- OFF CANVAS MENU -->
		<aside class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li><label>Navigation</label></li>
				<li><a href="index.html">Home</a></li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="blog.html">Blog</a>
					<ul class="off-canvas-list">
						<li><a href="blog.html">Archive</a></li>
						<li><a href="post.html">Single</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="page.html">Page</a>
					<ul class="off-canvas-list">
						<li><a href="page.html">Full-width</a></li>
						<li><a href="sidebar-left.html">Left Sidebar</a></li>
						<li><a href="sidebar-right.html">Right Sidebar</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li><a href="portfolio.html">Portfolio</a></li>
			</ul>
		</aside>

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.

    <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

	</div>
</div> <!-- END OFF CANVAS -->

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!)

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:

body {
    background-color: #f1f1f1;
}

.full-wdith {
	min-width: 100%;
}

header {
	background: url('../images/stary-bg.png') #074e68;
	min-height: 175px;
	h1 {
		color: #fff;
		padding-top: 50px;
	}
}

.navigation-section {
	background-color: #333;
	.top-bar {
		li {
			text-transform: uppercase;
		}
	}
}

.main-section {
	padding: 30px 0 25px 0;
}

footer {
	background-color: #074e68;
	padding: 50px 0 40px 0;
	h4, p {
		color: #fff;
	}
}

.copyright-section {
	background-color: #333;
	color: #fff;
	padding: 25px 0 0 0;
}

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:

1	$topbar-height: 65px;
2	$topbar-link-font-size: rem-calc(15);

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:

1	$tabbar-height: rem-calc(65);
2	$tabbar-hamburger-icon-top: rem-calc(16);

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:

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

IE9 Fix auf Foundation-Foren
Sass und Stiftung
Foundation-Sichtbarkeitsklassen
Grundlage außerhalb der Leinwand Komponente
Foundation Top-Bar-Komponente