CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS - Le framework pour le Material Design

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

Retour à la formation
Chapitre 2 Leçon 3
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :

  • Avoir des connaissances de base en HTML et CSS.
  • Être familier avec les concepts fondamentaux de jQuery.
  • Avoir une compréhension de base de Materialize CSS.

Métiers concernés

Les compétences abordées dans cette vidéo sont particulièrement utiles pour :

  • Développeurs web front-end.
  • Web designers.
  • Intégrateurs web.

Alternatives et ressources

Des alternatives à Materialize CSS incluent :

  • Bootstrap : Une autre bibliothèque CSS populaire pour la création de sites web responsives.
  • Bulma : Un framework CSS moderne basé sur Flexbox.
  • Foundation : Un autre framework CSS avec des composants flexibles et adaptatifs.

Questions & Réponses

La classe nav-wrapper est utilisée pour encapsuler totalement la navigation et permettre l'application correcte des styles de Materialize CSS.
Pour rendre un menu de navigation invisible sur les petits écrans, on utilise la classe hide-on-med-and-down de Materialize CSS.
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.