German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)
Ein sehr verbreiteter Trend in diesen Tagen ist die Verwendung einer festen Navigation, die weniger schrumpft, wenn der Benutzer die Seite herunterscrollt. In diesem Tutorial zeige ich Ihnen, wie Sie dies erreichen können, indem Sie die Top-Leiste von Zurbs Foundation, einige benutzerdefinierte Sass und jQuery verwenden. Um das Ganze abzurunden, fügen wir ein paar Medienabfragen hinzu, um unser Menü ansprechbar zu machen. Lass uns anfangen!
Bedarf
Sie benötigen ein paar Dinge, um dieses Tutorial zu beherrschen:
- Grundverständnis der Stiftung Topbar
- Grundlegendes Verständnis von Foundation und The Grid System
- Kenntnisse in der Arbeit mit Sass und Compass
- Ein wenig Erfahrung in der Verwendung von jQuery für einige Ereignisse
Anfangen
Zuerst werden wir unsere Arbeitsumgebung einrichten. Wenn Sie nicht wissen, wie Sie dies mit Compass und Sass tun können, lesen Sie den Abschnitt "Erste Schritte" in Erstellen einer oberen Leiste außerhalb des Canvas-Modus mit Foundation 5.
Erstellen Sie Ihr neues Foundation-Projekt und verwenden Sie die Compass Watch, um Ihr Projekt zu kompilieren. Wir werden unsere eigene style.scss im scss-Ordner für unsere Anpassungen und einige allgemeine Stile erstellen. Mit dieser Konfiguration tauchen wir in die allgemeine HTML-Struktur ein, los geht's!
Einrichten der HTML-Struktur
Schritt 1: Allgemeine Auszeichnung
Wenn Sie ein neues Foundation-Projekt gestartet haben, wechseln Sie zur Datei index.html und entfernen Sie zunächst den gesamten Inhalt zwischen den body-Tags, mit Ausnahme der Skripts unmittelbar vor dem schließenden body-Tag. Fügen Sie dann die folgende Zeile zu Ihrem <head> hinzu, um unsere style.css zu importieren.
1 |
<link rel="stylesheet" href="stylesheets/style.css" /> |
Als Nächstes werden wir einige Markups hinzufügen, wie die Kopfzeile, einen Hauptbereich und die Fußzeile, und wir werden auch Dummy-Inhalt hinzufügen, um unserer Seite etwas Fülle zu verleihen.
1 |
<!-- HEADER SECTION -->
|
2 |
<div class="contain-to-grid header-section"> |
3 |
|
4 |
<!-- TOPBAR SECTION -->
|
5 |
<nav class="top-bar important-class" data-topbar> |
6 |
|
7 |
</nav> <!-- END TOPBAR SECTION --> |
8 |
</div> <!-- END HEADER SECTION |
9 |
|
10 |
<!-- CONTENT FILL WHEN SCROLL = 0 -->
|
11 |
<div class="header-fill"></div> |
12 |
|
13 |
<!-- CONTENT SECTION -->
|
14 |
<div class="row content-section"> |
15 |
<div class="main-content"> |
16 |
<div class="small-12 medium-12 large-12 columns"> |
17 |
<h1>Fancy Foundation Top Bar</h1> |
18 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
19 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
20 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
21 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
22 |
</div>
|
23 |
</div>
|
24 |
</div> <!-- END CONTENT SECTION --> |
25 |
|
26 |
<!-- FOOTER SECTION -->
|
27 |
<div class="footer-section"> |
28 |
<div class="row"> |
29 |
<div class="small-12 medium-12 large-12 columns"> |
30 |
<p>© Copyright 2014</p> |
31 |
</div>
|
32 |
</div>
|
33 |
</div> <!-- END FOOTER SECTION --> |
Hier haben wir einen Header-Abschnitt erstellt, der das <nav>, einen Inhaltsabschnitt und einen Fußzeilenabschnitt enthält. Es gibt ein paar Dinge zu beachten:
- Unser
<nav>hat eine Klasse. Wichtig,.important-classwelches wir verwenden werden, um jQuery mitzuteilen, welches Element zum Ziel führen soll, wenn wir runterscrollen. - Wir haben ein div mit einer Klasse
.header-filleingefügt. Wir verwenden dies, um etwas Abstand zwischen dem oberen Rand des Browsers und dem Inhaltsabschnitt zu schaffen, da unser Header fest ist und einen höheren Z-Index als der Rest der Elemente auf der Seite aufweist.
Schritt 2: Top Bar Markup
Als nächstes werden wir den HTML-Code für unsere Top-Leiste schreiben. Wir benötigen einen Titelbereich für unser Logo und einen Abschnitt mit einer <ul> Sehen Sie sich den folgenden HTML an:
1 |
<!-- TOPBAR SECTION -->
|
2 |
<nav class="top-bar important-class" data-topbar> |
3 |
|
4 |
<!-- TITLE AREA & LOGO -->
|
5 |
<ul class="title-area"> |
6 |
<li class="name"> |
7 |
<img src="img/Acme_Colour.png" alt="" id="logo-image"> |
8 |
</li>
|
9 |
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> |
10 |
</ul> <!-- END TITLE AREA & LOGO --> |
11 |
|
12 |
<!-- MENU ITEMS -->
|
13 |
<section class="top-bar-section"> |
14 |
<ul class="right"> |
15 |
<li class="active"><a href="index.php">Home</a></li> |
16 |
<li><a href="blog.php">Blog</a></li> |
17 |
<li><a href="#">About us</a></li> |
18 |
<li><a href="#">Portfolio</a></li> |
19 |
<li class="has-dropdown"> |
20 |
<a href="#">Services</a> |
21 |
<ul class="dropdown"> |
22 |
<li><a href="#">Service #1</a></li> |
23 |
<li><a href="#">Service #2</a></li> |
24 |
<li><a href="#">Service #3</a></li> |
25 |
</ul>
|
26 |
</li>
|
27 |
<li><a href="#">Contact</a></li> |
28 |
</ul>
|
29 |
</section> <!-- END MENU ITEMS --> |
30 |
</nav> <!-- END TOPBAR SECTION --> |
Wir haben eine <ul> mit dem Klassentitel-Bereich title-area hinzugefügt, wo wir unser Logo behalten. Als nächstes haben wir unsere <section> mit einer Klasse von
top-bar-section und eine <ul> mit einer class .right, die alle unsere Listenelemente enthält. Unser Image hat eine ID des logo-image, die wir später in diesem Tutorial auch in unserem jQuery benötigen.
Schritt 3: Ergebnisse bisher
Wenn wir unseren Browser öffnen und zu unserer Indexdatei gehen, werden wir feststellen, dass unser grundlegendes Foundation-Styling uns viel Arbeit abverlangt, damit die Dinge gut aussehen. Unser Logo passt jedoch immer noch nicht. Im nächsten Schritt werden wir das beheben und unserer Header-Navigation ein ordentliches Styling geben.
Sass einrichten
Um die gewünschten Ergebnisse zu erzielen, benötigen wir ein paar grundlegende Stile für unsere Sektionen, insbesondere die Kopfzeile und die obere Leiste. Wir werden Sass nutzen, um es zu verwirklichen.
Schritt 1: Allgemeines Styling
Um zu beginnen, geben wir allen unseren Sektionen ein grundlegendes Styling. Schau dir den Sass unten an:
1 |
$primary-color: #ef4523; |
2 |
|
3 |
/*
|
4 |
HEADER SECTION
|
5 |
========================================================================== */
|
6 |
.header-section { |
7 |
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); |
8 |
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); |
9 |
position: fixed; |
10 |
z-index: 999; |
11 |
min-width: 100%; |
12 |
}
|
13 |
|
14 |
.contain-to-grid { |
15 |
background-color: rgba(255, 255, 255, 0.97); |
16 |
}
|
17 |
|
18 |
// FILL USED FOR HEADER |
19 |
.header-fill { |
20 |
background: #fff; |
21 |
height: 135px; |
22 |
.tablet-mobile-logo img { |
23 |
padding-top: 30px; |
24 |
}
|
25 |
}
|
26 |
|
27 |
// USED FOR JQUERY ACTION |
28 |
.padding-on-my-header { |
29 |
padding: 17px 0.9375rem 62px 0.9375rem; |
30 |
ul.title-area img { |
31 |
margin: -5px 0 0 0; |
32 |
}
|
33 |
}
|
34 |
|
35 |
.full-width { |
36 |
min-width: 100%; |
37 |
}
|
38 |
|
39 |
p { |
40 |
line-height: 3rem; |
41 |
padding-bottom: 30px; |
42 |
}
|
43 |
|
44 |
|
45 |
/*
|
46 |
CONTENT SECTION
|
47 |
========================================================================== */
|
48 |
|
49 |
|
50 |
.content-section { |
51 |
.main-content { |
52 |
margin-top: 35px; |
53 |
}
|
54 |
}
|
55 |
|
56 |
|
57 |
/*
|
58 |
FOOTER SECTION
|
59 |
========================================================================== */
|
60 |
|
61 |
.footer-section { |
62 |
background: #333; |
63 |
min-height: 100px; |
64 |
p { |
65 |
color: #fff; |
66 |
margin-top: 50px; |
67 |
}
|
68 |
}
|
Wir verwenden hier eine Primärfarbe-Variable, die wir für einige der Top-Bar-Styling verwenden werden. Unsere Header-Sektion hat einen schönen, subtilen Box-Shadow, so dass es aussieht, als ob es über dem Rest des Inhalts schwebt. Indem wir seine Position auf fixed setzen und den Z-Index 999 setzen, sorgen wir dafür, dass die Navigation beim Scrollen nach oben im Browser bleibt und über allen anderen Elementen auf der Seite bleibt.
Unser .contain-to-grid Klasse hat eine subtile transparente weiße Farbe, so dass beim Scrollen der Header so aussieht, als würde der Header über allen anderen Elementen schweben. Wir müssen das Menü jedoch noch anpassen, also kümmern wir uns als nächstes darum.
Schritt 2: Topbar Styling
Jetzt werden wir das Styling hinzufügen, um unserer Top Bar ein schönes, elegantes Aussehen zu geben. Sie könnten auch einige der Einstellungen der oberen Leiste in _settings.scss anpassen, aber ich werde Ihnen zeigen, wie Sie dies mit unseren eigenen benutzerdefinierten Überschreibungen tun können. Der Sass unten erklärt, was passiert wo:
1 |
/*
|
2 |
TOPBAR NAVGATION
|
3 |
========================================================================== */
|
4 |
.top-bar
|
5 |
{
|
6 |
background: none; |
7 |
padding: 45px 0.9375rem 90px 0.9375rem; |
8 |
transition: all 0.5s ease 0.1s; |
9 |
// LOGO ADJUSTMENT |
10 |
ul.title-area img { |
11 |
margin: -10px 0 0 0; |
12 |
}
|
13 |
.top-bar-section ul { |
14 |
background: none; |
15 |
// MENU ITEM STYLES |
16 |
li a:not(.button), li.active a:not(.button) { |
17 |
background: none; |
18 |
line-height: 30px; |
19 |
font-size: 12px; |
20 |
padding: 0; |
21 |
margin: 5px 0 0 0; |
22 |
text-transform: uppercase; |
23 |
}
|
24 |
// MENU ITEM HOVERS |
25 |
li a:not(.button):hover { |
26 |
background: none; |
27 |
border-bottom: 2px solid $primary-color; |
28 |
color: #222; |
29 |
}
|
30 |
// MENU ITEM ACTIVE |
31 |
li.active a:not(.button) { |
32 |
border-bottom: 2px solid $primary-color; |
33 |
color: #222; |
34 |
&:hover { |
35 |
background: none; |
36 |
}
|
37 |
}
|
38 |
li { |
39 |
margin-left: 30px; |
40 |
a { |
41 |
color: #888; |
42 |
}
|
43 |
}
|
44 |
}
|
45 |
// DROPDOWN MENU |
46 |
.top-bar-section ul li:hover:not(.has-form) > a { |
47 |
color: #333; |
48 |
}
|
49 |
.top-bar-section li ul.dropdown { |
50 |
background: #fff; |
51 |
border: 1px solid #ddd; |
52 |
color: #888; |
53 |
li { |
54 |
border-bottom: 1px solid #ddd; |
55 |
margin: 0; |
56 |
padding: 5px 15px 5px 15px; |
57 |
}
|
58 |
}
|
59 |
.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) { |
60 |
background: none; |
61 |
color: #222; |
62 |
border-bottom: none; |
63 |
padding: 20px -4px 40px 45px; |
64 |
}
|
65 |
.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) { |
66 |
background: none; |
67 |
color: #222; |
68 |
}
|
69 |
// DROPDOWN ARROW |
70 |
.has-dropdown > a:after { |
71 |
border-color: rgba(0, 0, 0, 0.5) transparent transparent; |
72 |
margin-top: -5px; |
73 |
}
|
74 |
}
|
Hinweis: Wir werden den .padding-on-my-header verschieben Klasse unter den Top Bar Regeln. Dies ist notwendig, damit das Padding das der oberen Leiste überschreibt.
Wir haben unserer Top-Leiste etwas Polsterung hinzugefügt, und wir haben einen Übergang von 0.5s auf 0.1s gesetzt. Dies sorgt für einen reibungslosen Übergangseffekt, wenn unsere jQuery einsetzt. Der Hintergrund wird auf none gesetzt, so dass unsere Kopfzeile die leicht transparente Farbe hat, die wir unserem .contain-to-grid gegeben haben Klasse. Der Rest ist ein einfaches Styling für die Top-Bar-Menüpunkte, Drop-Downs, Hover und aktive Zustände. Nichts zu übertrieben, aber es hat uns ein sauberes Ergebnis gegeben, indem wir etwas Polsterung und Leerraum hinzugefügt haben.
Schritt 3: Ergebnisse bisher
Schauen wir uns an, was wir bisher haben. Es fängt sicherlich an, wie etwas auszusehen! Allerdings ist unsere Speisekarte immer noch etwas groß, wenn wir die Seite runterscrollen. Das ist, wo unser .padding-on-my-header Klasse tritt ein.
jQuery für Wirkung
Lassen Sie uns ein wenig jQuery-Magie verwenden, um den .padding-on-my-header hinzuzufügen scrollen Sie und ändern Sie das Logo in ein kleineres.
Schritt 1: Erstellen Sie unsere init.js
Wir werden eine init.js-Datei erstellen, die unseren jQuery-Code enthält. Legen Sie es in Ihren /js Ordner und fügen Sie die folgende Zeile am unteren Ende der Indexdatei direkt vor dem schließenden body-Tag ein, um das Skript einzubinden:
1 |
<!-- JAVASCRIPTS -->
|
2 |
<script src="bower_components/jquery/dist/jquery.min.js"></script> |
3 |
<script src="bower_components/foundation/js/foundation.min.js"></script> |
4 |
<script src="js/app.js"></script> |
5 |
<!-- OUR JQUERY MAGIC -->
|
6 |
<script src="js/init.js"></script> |
7 |
</body>
|
8 |
</html>
|
Unsere init.js enthalten Folgendes:
1 |
jQuery(window).scroll(function() { |
2 |
if (scroll >= 50) { |
3 |
$('#logo-image').attr('src', 'img/Acme_Monogram_Colour.png') |
4 |
$(".important-class").addClass("padding-on-my-header"); |
5 |
}
|
6 |
if (scroll < 50) { |
7 |
$(".important-class").removeClass("padding-on-my-header"); |
8 |
$('#logo-image').attr('src', 'img/Acme_Colour.png') |
9 |
}
|
10 |
});
|
Schauen wir uns an, was hier wirklich passiert. Wenn der Benutzer nach unten scrollt, führen wir folgende Funktion aus: Wenn der Benutzer mehr als 50 Pixel scrollt, verkleinern wir die obere Leiste und fügen ein kleineres Logo ein:
- Wir finden unser id logo-image und ersetzen die Bildquelle durch die unseres kleineren Logos.
- Next, we look for our
.important-classund fügen Sie eine weitere Klasse hinzu:.padding-on-my-header
Wenn wir wieder hochgehen und unter 50 Pixel scrollen, machen wir das Gegenteil und entfernen die Padding-Klasse, indem wir das große ol-Logo zurückstellen.
Schritt 2: Überprüfen Sie die Ergebnisse
Mach weiter und gehe zurück zum Browser. Aktualisieren Sie die Seite und versuchen Sie, nach unten zu scrollen. Wenn alles wie geplant abgelaufen ist, sollten Sie sehen, dass die obere Leiste mit einem fließenden Übergang schrumpft und das große Logo durch das kleinere ersetzt wird. So weit, ist es gut. Aber wenn wir die Größe unseres Browsers ändern, werden Sie sehen, dass er noch nicht so schnell reagiert. Lass uns das erledigen!
Media Queries für die mobile Optimierung
Wir werden eine Medienabfrage für 1024px-Geräte und kleinere erstellen. Um dies zu erreichen, müssen wir den kleinen Breakpoint von Foundation ändern. Wie sagt man? Nun, das ist einfach! Wir tauchen einfach in unsere _settings.scss ein und suchen nach der folgenden Einstellung:
1 |
// Media Query Ranges |
2 |
$small-range: (0em, 64em); |
3 |
$medium-range: (64em, 64em); |
4 |
$large-range: (64.063em, 90em); |
5 |
$xlarge-range: (90.063em, 120em); |
6 |
$xxlarge-range: (120.063em, 99999999em); |
Wie Sie sehen können, haben wir den kleinen Bereich von 0em - 40em auf 0em - 64em verschoben, was 1024px ergibt; Unsere mittlere Reihe beginnt jetzt bei 64em. Speichern Sie Ihre Einstellungen, damit die Änderungen wirksam werden, und rufen Sie unsere Medienabfrage auf!
Schritt 1: Hinzufügen der Medienabfragen
Unsere Top Bar auf einem kleineren Gerät muss nicht so groß sein. Wir werden es ein wenig verkleinern und unsere Speisekarte neu positionieren. Wir werden auch eine viel kleinere Header-Füllung verwenden. Werfen Sie einen Blick auf die folgenden Stile:
1 |
@media only screen and (max-width: 1024px) { |
2 |
|
3 |
.top-bar { |
4 |
margin-top: 0; |
5 |
padding: 0; |
6 |
float: none; |
7 |
// MENU BUTTON AND HAMBURGER ICON |
8 |
.toggle-topbar.menu-icon a { |
9 |
color: #222; |
10 |
&:after { |
11 |
box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; |
12 |
}
|
13 |
}
|
14 |
// LOGO |
15 |
ul.title-area img { |
16 |
margin: -2px 0 0; |
17 |
width: 145px; |
18 |
}
|
19 |
.top-bar-section { |
20 |
ul { |
21 |
background: #333; |
22 |
li { |
23 |
margin-left: 0; |
24 |
}
|
25 |
li > a { |
26 |
background: $primary-color; |
27 |
border-radius: 0; |
28 |
font-size: 0.9rem; |
29 |
}
|
30 |
// NORMAL BUTTONS |
31 |
li:not(.has-form) a:not(.button) { |
32 |
background: none; |
33 |
color: #fff; |
34 |
padding: 10px 15px; |
35 |
margin-top: 0; |
36 |
&:hover { |
37 |
background: $primary-color; |
38 |
color: #fff; |
39 |
margin-top: 0; |
40 |
}
|
41 |
}
|
42 |
// ACTIVE BUTTON |
43 |
li.active:not(.has-form) a:not(.button) { |
44 |
background: $primary-color; |
45 |
color: #fff; |
46 |
padding: 10px 15px; |
47 |
margin-top: 0; |
48 |
&:hover { |
49 |
background: lighten($primary-color, 5%); |
50 |
margin-top: 0; |
51 |
}
|
52 |
}
|
53 |
}
|
54 |
}
|
55 |
}
|
56 |
// SMALLER IMAGE |
57 |
.top-bar.padding-on-my-header ul.title-area img { |
58 |
margin: 5px 13px 0; |
59 |
width: 35px; |
60 |
}
|
61 |
// EXPANDED TOPBAR MENU |
62 |
.top-bar.expanded { |
63 |
margin-top: 0; |
64 |
padding: 0; |
65 |
float: none; |
66 |
.toggle-topbar.menu-icon a { |
67 |
color: #fff; |
68 |
&:after { |
69 |
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff; |
70 |
}
|
71 |
}
|
72 |
}
|
73 |
|
74 |
// SMALLER HEADER |
75 |
.header-fill { |
76 |
height: 40px; |
77 |
}
|
78 |
|
79 |
}
|
Schauen wir uns an, was wir hier gemacht haben:
- Wir haben alle Abstände und Ränder in der oberen Leiste entfernt.
- Wir haben dem Menü-Text und dem Hamburger-Symbol eine graue Farbe anstelle der Standard-Weißfarbe gegeben, so dass sie auf unserer weißen oberen Leiste sichtbar ist.
- Wir haben unser größeres Logo so angepasst, dass es in die Top Bar passt.
- In der
top-bar-sectiongestalten wir unsere responsiven Menüpunkte, Hover und aktiven Zustände. - Wir verkleinern auch das kleinere Logo und positionieren es neu.
- In unserem erweiterten Responsive-Menü haben wir einige Abstände und Ränder entfernt.
- Zuletzt haben wir unsere
.header-fillgemacht kleiner, so dass es gleich der Höhe unserer Top Bar ist.
Schritt 2: Genießen Sie Ihre endgültigen Ergebnisse!
Wenn wir zurück zu unserem Browser gehen und die Größe ändern, können wir jetzt sehen, dass unsere reaktionsfähige Navigation in voller Wirkung ist. Scrollen Sie nach unten und sehen Sie, wie sich das Logobild noch ändert. Klicken Sie auf das Menü-Symbol, um die erweiterte Version unserer Responsive-Navigation zu sehen.
Fazit
Mit etwas Sass und jQuery Magie haben wir es geschafft, die mächtige, einfache Top Bar von ZURBs Foundation in einen fantastischen, trendigen, klebrigen Header mit einigen sanften Effekten zu verwandeln. Bereit für Sie, um sie selbst oder die Projekte Ihrer Kunden zu verwenden. Habe Spaß!
Ressourcen
