French (Français) translation by Aurélien Troublé (you can also view the original English article)
Les sites utilisant une barre de menu qui rétrécie lorsque l'utilisateur scroll sur votre page, afin d'être moins envahissante est en vogue en ce moment. Dans ce tutoriel, je vais vous montrer comment réaliser ceci en utilisant la Top Bar de ZURBs Foundation, ainsi que du sass et jQuery. Nous ajouterons également quelques media queries afin de rendre le menu responsive. C'est parti!
Pré-requis
Les éléments suivants seront nécessaire afin de bien appréhender ce tutoriel :
- Compréhension basique de la Topbar de Foundation (en anglais)
- Compréhension basique de Foundation et de son système de grilles (en anglais)
- Savoir travailler avec Sass et Compass
- Notions dans l'utilisation de jQuery pour la gestion d'événements
Se lancer
Tout d'abord, nous allons installer notre environnement de travail. Si vous ne savez pas faire ceci en utilisant Compass et Sass, référez-vous à la setion "Getting Started" du tutoriel Build a Top Bar Off Canvas Navigation With Foundation 5 (en anglais).
Créez votre nouveau projet Foundation et utilisez compass watch afin de compiler votre projet. Nous allons créer notre propre fichier style.scss dans le dossier scss pour nos ajustements et modification du style général. Maintenant que ceci est fait, penchons nous sur la structure HTML générale.
Mise en place de la structure HTML
Étape 1: Balisage général
Une fois votre nouveau projet Foundation mis en place, ouvrez votre fichier index.html et commencez par supprimer tout le contenu qui se situe entre les balises body sauf les scripts situés juste avant la balise qui ferme le body Ajoutez maintenant la ligne suivante entre les balises <head>, afin d'importer style.css.
1 |
<link rel="stylesheet" href="stylesheets/style.css" /> |
Maintenant, nous allons ajouter des balises, comme header, une section principale et le footer, nous ajouterons également du contenu fictif afin de remplir la page et de permettre le scroll.
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 --> |
Ici, nous avons créé une section header, incluant notre <nav>, une section contenu, et une section footer. Quelques éléments notables :
- Notre
<nav>a une classe.important-class, que nous utiliserons afin de signaler à jQuery quel élément cibler lorsque nous scrollerons. - Nous avons inclus une div avec la classe
.header-fill. Nous l'utiliserons afin de créer un espace entre le haut du navigateur et la section contenu, alors que notre header sera fixe, et aura un z-index plus élevé que les autres éléments de la page.
Étape 2: Balisage de la Top Bar
Attaquons nous maintenant à au code HTML de notre Top Bar. Il nous faut un title area pour notre logo et une section avec un <ul> pour contenir les objets de notre menu. Voici notre code HTML à insérer entre nos balises <nav> :
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 --> |
Nous avons ajouté un <ul> avec la classe title-area où se situe notre logo (vous pouvez ajouter le votre). Ensuite, nous avons notre <section> avec une classe top-bar-section et un <ul> avec une classe .right, contenant tous les éléments de notre liste. Notre image a un id logo-image dont nous aurons également besoin dans notre jQuery, plus tard dans ce tutoriel.
Étape 3: Résultat actuel
En ouvrant notre fichier index dans un navigateur, nous constatons que le style de base de Foundation nous épargne beaucoup de travail, en plus d'avoir un rendu de base visuellement agréable. Si ce n'est que notre logo ne rentre pas correctement. Dans l'étape suivante nous allons résoudre ce problème et personnaliser le style de notre header de navigation.
Utilisation de Sass
Afin d'obtenir le résultat souhaité, nous aurons besoin de modifier le style de nos sections, et plus particulièrement le header et la section Top Bar. Pour ce faire, nous allons utiliser Sass.
Etape 1: Style général
Pour commencer, appliquons un style de base à toutes nos sections. Voici le code Sass du style que nous vous proposons :
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 |
}
|
Nous utilisons ici une variable couleur primaire, que nous utiliserons pour le style de certains éléments de notre Top Bar. Notre header-section a une subtile box-shadow, lui donnant l'air de flotter au dessus du reste du contenu. En affectant affectant une position position fixed et en lui donnant un z-index : 999, nous nous assurons que la navigation reste collée à la partie supérieure du navigateur et qu'elle reste au dessus des autres éléments de notre page lorsque nous scrollons vers le bas.
Notre classe .contain-to-grid a un blanc légérement transparent, de sorte que lorsque l'on scroll, le header donne l'impression de flotter au dessus des autres éléments. Nous devons encore configurer quelques éléments de notre menu, et c'est ce que nous allons faire à présent.
Étape 2: Style de la Top Bar
Nous allons maintenant apporter quelques ajustements au style afin d'obtenir un rendu sophistiqué. Vous pouvez également ajuster quelques réglages de la Top Bar dans _settings.scss, mais je vais vous montrer comment faire cela en utilisant nos propres overrides. Voici le code Sass que nous utiliserons :
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 |
}
|
Note : Nous allons déplacer la classe .padding-on-my-header (de la portion de code Sass précédente) en dessous des règles ci-dessus, concernant la Top Bar. Ceci est nécessaire afin que le padding replace celui de la Top Bar
Nous avons ajouté un padding à notre Top Bar et nous ont mis une transition de 0,5 s, ease 0,1 s. Cela vous donnera un effet de transition en douceur quand notre jQuery sera utilisé. L'arrière-plan est définie sur none, afin que notre header prenne la couleur légèrement transparente que nous avons donné notre classe .contain-to-grid . Le reste est un styles de base pour de les objets de menu de la Top Bar, les menus déroulants, les hovers et les états actifs. Nous avons jugé que l'ajout de padding et de white space nous donnait un rendu épuré et élégant.
Étape 3: Résultat actuel
Jetons un œil à ce que nous obtenons désormais. Cela commence probablement à prendre forme. Toutefois, notre menu reste un peu envahissant lorsque l'on scroll sur la page. C'est là que notre classe .padding-on-my-header rentre en jeu!
Utiliser le jQuery pour l'effet
Utilisons la magie du jQuery pour lier la classe .padding-on-my-header au scroll et changer le logo, pour une version plus petite.
Étape 1: Création de notre init.js
Nous allons créer un fichier init.js pour abriter notre code jQuery. Placez-le dans votre dossier /js et ajoutez la ligne suivante tout en bas de votre fichier index.html, juste avant la balise de fermeture du body, afin intégrer notre script :
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>
|
Notre init.js contiendra la portion de code suivante :
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 |
});
|
Observons ce qu'il se passe ici. Lorsque l'utilisateur scroll, la fonction suivante est déclenchée : si l'utilisateur scroll sur plus de 50 pixels, alors la Top Bar rétrécie et remplace le logo par une version plus petite :
- L'id logo-image est sélectionnée, et la source de l'image est remplacée par celle de la version plus petite du logo.
- Ensuite, la classe
.important-classest sélectionnée et une autre classe lui est attribué :.padding-on-my-header
Lorsque nous remontons en scrollant, à partir de 50 pixel de distance par rapport au haut de la page, le processus inverse s'effectue, redonnant la classe d'origine, et remettant en place notre gros logo.
Étape 2: Vérifier le résultat
Retournons à notre navigateur. Rafraichissons notre page (F5), et essayons de scroller. Si tout s'est déroulé comme prévu, vous devriez maintenant voir la Top Bar rétrécir avec une transition en douceur et le grand logo être remplacée par le petit. Jusqu'ici tout va bien. Mais lorsque nous redimensionnons notre navigateur, vous verrez que ce n'est pas tout à fait responsive pour le moment. Occupons nous de ça!
Media Queries pour l'optimisation Mobiles
Nous allons créer une media query pour les appareils de 1024px et plus petits. Pour obtenir l'effet approprié, nous devons changer breakpoint small de Fondation. Comment faire? Me demanderez-vous... Eh bien, c'est facile! Il suffit d'ouvrir notre fichier _settings.scss et de rechercher les lignes suivante :
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); |
Comme vous pouvez le constater, nous avons modifié la taille de small-range de 0em - 40em à 0em - 64em, ce qui permet de calculer de 1024px ; Notre medium-range commence maintenant à 64em. Enregistrez vos réglages pour que les modifications prennent effet. Nous allons maintenant nous atteler aux media queries!
Étape 1: Ajouter les Media Queries
Notre Top Bar n'aura pas besoin d'être si grosse sur un écran plus petit. Nous allons la réduire un peu et repositionner notre menu. Nous utiliserons également un header-fill plus petit. Voici le code de notre style :
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 |
}
|
Jetons un œil à ce que nous venons de faire :
- Nous avons supprimé tous les padding et les margins de notre Top Bar.
- Nous avons donné donné une couleur grise au texte du menu et à l'icone hamburger à la place du blanc par défaut, afin de les rendre visible sur notre Top Bar blanche.
- Nous avons fait en sorte de faire rentrer notre gros logo à l'intérieur de la Top Bar.
- Dans la
top-bar-sectionnous stylisons nos objets de menu responsive, les hovers et les états actifs. - Nous redimensionnons et repositionnons également la version plus petite du logo.
- Nous avons enlevé du padding et des margins sur notre menu responsive déplié.
- Pour finir, nous avons rétrécie notre classe
.header-fill, pour qu'elle soit égale à la taille de notre Top Bar.
Étape 2: Voilà le résultat final!
Lorsque nous revenons à notre navigateur et que nous le redimensionnons, nous constatons que notre navigation responsive fonctionne. En scrollant, vous constaterez que les images changent bien. Cliquez sur l'icône du menu pour voir la version dépliée du menu responsive.
Conclusion
Avec du Sass et la magie de jQuery, nous avons réussis à transformer le menu de base de ZURB's Foundation en un menu fixe tendance avec des effets sophistiqués! Vous pouvez maintenant l'utiliser pour vos projets ou ceux de vos clients. Lâchez-vous!
Ressources
