NavBar Responsive #2 : Améliorez votre menu avec un dropdown animé
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO NavBar Responsive #2 : Améliorez votre menu avec un dropdown animé

Carl Brison
Vente flash ! -23% Jusqu'au 19 mai, 09:20
9,95€12,95€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Bienvenue dans ce deuxième épisode consacré à la création d’une barre de navigation responsive
Nous allons cette fois-ci ajouter un menu déroulant (dropdown) pour offrir une meilleure accessibilité et organisation à notre menu.

Dans ce tutoriel, nous allons voir pas à pas comment :

  • ✅ Structurer notre barre de navigation en HTML,
  • ✅ Styliser notre menu et notre dropdown en CSS,
  • ✅ Rendre l’ensemble interactif grâce à JavaScript,
  • ✅ Ajouter une version mobile avec un burger menu et une fermeture dynamique.

Avec une approche moderne et épurée, nous allons créer un design responsive, compatible avec tous les écrans, tout en assurant une navigation fluide et intuitive pour l’utilisateur.

Au programme de ce tuto Drowpdown animé

  • Création d’un menu déroulant avec des liens d’accès utilisateur,
  • Animation fluide des transitions en CSS,
  • Gestion du menu sur mobile et desktop,
  • Amélioration de l’expérience utilisateur avec des effets interactifs.

Que vous soyez débutant ou confirmé, ce tutoriel est conçu pour vous aider à progresser et à mieux comprendre les bonnes pratiques du développement web.

🚀 Prêt à coder ? C’est parti !

Épisodes précédents :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Mise en forme des enfants directs de Nav
Leçon 3
Mise en forme du logo et de la section
Leçon 4
Mise en forme du menu
Leçon 5
Définir un point de rupture
Leçon 6
Faire apparaitre me menu
Leçon 7
Code HTML du dropdown

Plan détaillé du cours

Leçon 1Mise en place du HTML
04m36
Leçon 2Mise en forme des enfants directs de Nav
04m58
Leçon 3Mise en forme du logo et de la section
05m46
Leçon 4Mise en forme du menu
04m13
Leçon 5Définir un point de rupture
06m08
Leçon 6Faire apparaitre me menu
04m41
Leçon 7Code HTML du dropdown
04m06
Leçon 8Mise en forme du dropdown-nav
04m51
Leçon 9Mise en forme du dropdown-menu
06m45
Leçon 10Créer une flèche sur le dropdown-menu
03m27
Leçon 11Fonctionnement du dropdown
05m39
Leçon 12Derniers réglages
05m57
Leçon 13Menu One Page
04m40
Leçon 14Bonus: C'est quoi cette extension ?
01m27

Aperçus

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS , HTML

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 9,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1471 tutos gratuits

Notre politique de protection des données