() translation by (you can also view the original English article)
Le menu de navigation est une Interface Utilisateur (UI) nécessaire sur un site web. Indépendamment de la taille du projet — une seule page, ou un site e-commerce complet — un site Web se doit d'avoir un menu de navigation afin de pouvoir se déplacer à travers les pages et les sections. Suite à notre précédent tutoriel sur Material Design Lite : La grille, nous allons ici voir comment utiliser un autre composant de MDL : La navigation.
Avant de commencer, n'oubliez pas d'inclure les bibliothèques MDL ; les feuilles de styles et JavaScrypt dans le head de votre page.
1 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> |
2 |
<link href='https://fonts.which is googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> |
3 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> |
4 |
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Maintenant, nous pouvons commencer à construire notre navigation.
Navigation Basique
La navigation dans MDL est un sous-composant du layout, avec d'autres comme la grille, les tableaux et le pied de page. La disposition de base du menu de navigation dans MDL comprend le nom du site, un menu comportant des liens et un menu off-canvas (menu mobile caché).
Pour en créer un, ajoutez une div vide avec les classes mdl-layout et mdl-js-layout. Ces 2 classes sont nécessaires. La classe mdl-layout applique des styles prédéfinis qui se chargent essentiellement de l'Interface Utilisateur (UI) et ainsi faire en sorte que le menu de navigation s'affiche correctement. Pour ce qui est de la classe mdl-js-layout, elle a pour rôle d'ajouter un comportement plus dynamique grâce à JavaScript ; elle comprend l'ajout de nouveaux éléments et classes supplémentaires afin d'ajouter quelques fonctions.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
</div>
|
A l'intéreur de cette div, ajoutez un élément header avec la classe mdl-layout__header jointe.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
</header>
|
4 |
</div>
|
Ensuite, créez une nouvelle div avec pour classe mdl-layout__header-row. Celle-ci est un élément qui nous permettra d'ajouter la navigation à la bonne place.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
|
5 |
</div>
|
6 |
</header>
|
7 |
</div>
|
Enveloppez le nom du site avec une balise span avec la classe mdl-layout-title, puis ajoutez y une balise d'ancrage redirigeant vers la page d'accueil. Vous pouvez aussi remplacer le texte par une image comme le logo du site par exemple.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
</div>
|
6 |
</header>
|
7 |
</div>
|
Créez une div en dessous du nom du site ayant pour classe mdl-layout-spacer. Cette div va ajouter un espace après le nom du site et décaler le menu sur la droite de la barre de navigation.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
</div>
|
7 |
</header>
|
8 |
</div>
|
Maintenant, nous ajoutons le menu de navigation en dessous de l'espace en utilisant un élément nav.
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
<nav class="mdl-navigation"> |
7 |
<a class="mdl-navigation__link" href="#">Home</a> |
8 |
<a class="mdl-navigation__link" href="#">Blog</a> |
9 |
<a class="mdl-navigation__link" href="#">About</a> |
10 |
<a class="mdl-navigation__link" href="#">Contact</a> |
11 |
</nav>
|
12 |
</div>
|
13 |
</header>
|
14 |
</div>
|
Enfin, ajoutez une nouvelle div avec la classe mdl-layout__drawer en dehors de l'élément header pour construire le menu de navigation caché (mobile).
1 |
<div class="mdl-layout mdl-js-layout"> |
2 |
<header class="mdl-layout__header"> |
3 |
<div class="mdl-layout__header-row"> |
4 |
<span class="mdl-layout-title">Acme</span> |
5 |
<div class="mdl-layout-spacer"></div> |
6 |
<nav class="mdl-navigation"> |
7 |
<a class="mdl-navigation__link" href="#">Home</a> |
8 |
<a class="mdl-navigation__link" href="#">About</a> |
9 |
<a class="mdl-navigation__link" href="#">Contact</a> |
10 |
</nav>
|
11 |
</div>
|
12 |
</header>
|
13 |
<div class="mdl-layout__drawer"> |
14 |
<span class="mdl-layout-title">Acme</span> |
15 |
<nav class="mdl-navigation"> |
16 |
<a class="mdl-navigation__link" href="#">Products</a> |
17 |
<a class="mdl-navigation__link" href="#">Services</a> |
18 |
<a class="mdl-navigation__link" href="#">Portfolios</a> |
19 |
<a class="mdl-navigation__link" href="#">Achievements</a> |
20 |
<a class="mdl-navigation__link" href="#">Blog</a> |
21 |
</nav>
|
22 |
</div>
|
23 |
</div>
|
24 |
</div>
|
Dès que vous rechergerez la page, le menu vertical devrait fonctionner immédiatement ; vous devriez trouver l'icône "hamburger" permettant de l'afficher et le cacher. Essayez :
Cependant, comme vous pouvez le voir ci-dessus, la barre de navigation ainsi que le nom du site sont cachés. MDL les caches volontairement lors de l'affichage d'une fenêtre de la taille d'une tablette. Ceci est une décision réfléchie par l'équipe de MDL. Le me horizontal est mal adapté en terme de mise à l'échelle, en particulier si vous avez des dizaines de menus. A un certain moment, elle ne rentre plus totalement dans une fenêtre étroite et augmente le risque de cacher l'interface utilisateur.
Néanmoins, si vous tenez à conserver la visibilité de la navigation horizontale sur les petits écrans, ajoutez mdl-layout--fixed-header avec la classe mdl-layout.
1 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
2 |
... more content here ... |
3 |
</div>
|
Cette classe va forcer l'affichage de la navigation sur les téléphones et tablettes.
Ajouter un formulaire de recherche
Les formulaires de recherche dans la barre de navigation sont des éléments ajoutés fréquemment sur un site internet. Ils peuvent être très utiles pour les utilisateurs qui ne sont pas sûr de trouver ce qu'ils cherchent via les menus. Avec les formulaires de recherche ils n'ont qu'à taper et rechercher.
Vous trouverez le code HTML complet pour ajouter le formulaire de recherche dans l'élément nav ci-dessous.
1 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
2 |
... more content here ... |
3 |
<nav class="mdl-navigation"> |
4 |
<a class="mdl-navigation__link" href="#">Home</a> |
5 |
<a class="mdl-navigation__link" href="#">About</a> |
6 |
<a class="mdl-navigation__link" href="#">Contact</a> |
7 |
</nav>
|
8 |
<!-- start search form -->
|
9 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> |
10 |
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> |
11 |
<i class="material-icons">search</i> |
12 |
</label>
|
13 |
<div class="mdl-textfield__expandable-holder"> |
14 |
<input class="mdl-textfield__input" type="text" id="search-expandable" /> |
15 |
<label class="mdl-textfield__label" for="search-expandable">Search text</label> |
16 |
</div>
|
17 |
</div>
|
18 |
<!-- end search form -->
|
19 |
... more content here ... |
20 |
</div>
|
Ici, nous avons défini deux composantes de MDL différents, à savoir, le champ de saisie et le bouton. Le bouton apparait comme une icône de recherche qui affiche le champ de saisie lors du clic.
Conclusion
La navigation dans MDL a un grand nombre de composants permettants de varier ce que nous voulons organiser pour différents scénarios. Dans ce tutoriel, nous avons construit un menu de navigation de base en utilisant les classes essentielles.
La navigation peu être étendue avec d'autres classes personnelles ou en ajoutant d'autres composants de MDL. Par exemple, nous pouvons rendre le fond de la barre de navigation transparent et ajouter une image en fond, faire en sorte que le menu de navigation vertical soit toujours visible, fixer le menu de navigation, ou remplacer les liens du menu par des onglets pour un site d'une page.
Le composant de navigation, cependant, est assez opiniâtre.
Le padding à gauche de la navigation est fixé à 72px, ce qui suggère que la navigation devrait toujours avoir un menu vertical pour mobile avec l'icône "hamburger". Parfois, nous pouvons n'avoir besoin que des fonctions de navigation de base. Pourtant la navigation est un composant ancré. Je suis impatiens qu'il y ai un apport d'améliorations ou de fonctionnalités supplémentaires peut-être.
Dans le prochain tutoriel, nous allons examiner 2 composants que nous avons déjà brièvement examinés : boutons et champs texte. À la prochaine fois !
