Advertisement
  1. Web Design
  2. Material Design Lite

Apprendre à utiliser Material Design Lite : Menu de navigation

by
Read Time:4 minsLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: The Grid
Learning Material Design Lite: Buttons

French (Français) translation by Moltroon (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.

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.

A l'intéreur de cette div, ajoutez un élément header avec la classe mdl-layout__header jointe.

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.

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.

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.

Maintenant, nous ajoutons le menu de navigation en dessous de l'espace en utilisant un élément nav.

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

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.

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.

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.

Les styles du menu de navigation inspecté par Chrome DevTools

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 !

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.