CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS Création d'une Barre de Navigation Responsive avec Materialize CSS

Création d'une Barre de Navigation Responsive avec Materialize CSS

Navigation adaptive pour tous les écrans
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser Materialize CSS
Revoir le teaser Je m'abonne
Transcription

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

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.

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.

Voir plus
Questions réponses
Pourquoi utilise-t-on la classe <code>nav-wrapper</code> en Materialize CSS?
La classe nav-wrapper est utilisée pour encapsuler totalement la navigation et permettre l'application correcte des styles de Materialize CSS.
Comment rendre un menu de navigation invisible sur les petits écrans?
Pour rendre un menu de navigation invisible sur les petits écrans, on utilise la classe hide-on-med-and-down de Materialize CSS.
Quelle est l'utilité de la classe <code>button-collapse</code>?
La classe 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.