Introduction à la Navigation Responsive
Objectifs
Les objectifs de cette vidéo sont de montrer comment :
- Créer une barre de navigation de base avec HTML et Materialize CSS.
- Personnaliser la couleur et le positionnement de la navigation.
- Ajouter un menu hamburger pour les petits écrans.
- Configurer le menu pour mobiles avec jQuery.
Résumé
Cette leçon explique comment utiliser les classes de Materialize CSS pour créer une barre de navigation responsive, adaptée aux écrans de différentes tailles, avec un menu hamburger.
Description
Dans cette leçon, nous allons approfondir l'utilisation de Materialize CSS pour créer une barre de navigation responsive. Nous commencerons par définir une navigation de base, puis nous ajouterons des classes spécifiques pour améliorer son appearance et sa fonctionnalité. Nous allons placer la navigation à droite, ajouter un logo à gauche et configurer un menu hamburger pour les petits écrans.
Ensuite, nous explorerons la façon de masquer et d'afficher la navigation en fonction de la taille de l'écran, en utilisant la classe hide-on-med-and-down
. Nous verrons également comment dupliquer le menu pour créer une version spécifique aux mobiles avec la classe sidenav
et comment activer le menu hamburger avec jQuery
.
À la fin de cette leçon, vous serez en mesure de créer une barre de navigation qui non seulement est esthétiquement plaisante, mais qui offre également une expérience utilisateur fluide sur toutes les tailles d'écran.
Questions fréquentes
nav-wrapper
est utilisée pour encapsuler totalement la navigation et permettre l'application correcte des styles de Materialize CSS.
hide-on-med-and-down
de Materialize CSS.
button-collapse
est utilisée pour transformer un bouton en déclencheur d'un menu latéral, généralement pour les menus destinés aux écrans mobiles.