NavBar Responsive #3 : Menu responsive avec sous-menus
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h29
de formation
16
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

NavBar Responsive #3 : Menu responsive avec sous-menus

4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
1h29
de formation
16
leçons vidéo
1
chapitre

Créer un Menu Responsive avec Sous-menu en HTML, CSS et JavaScript 🚀

Bienvenue dans ce troisième épisode consacré à la création d’une barre de navigation responsive !
Vous souhaitez intégrer un menu moderne, fluide et adapté à tous les écrans sur votre site web ?
Dans ce tutoriel, je vous guide pas à pas pour concevoir un menu responsive avec sous-menus en utilisant HTML, CSS et JavaScript.

Au programme de ce tuto menu responsive avec sous-menu

  • Structurer le menu en HTML,
  • Styliser avec du CSS pour un design attractif et responsive,
  • Ajouter du JavaScript pour gérer l’affichage des sous-menus,
  • Adapter le menu pour les mobiles avec une version "burger menu".

Que vous soyez débutant ou développeur confirmé, ce tuto vous permettra de créer un menu dynamique et professionnel en toute simplicité. Prêt à coder ? 🎯

Suggestion: Et si vous passiez votre Certification FrontEnd avec moi ?!

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Mise en forme du header
Leçon 3
Mise en forme des liens
Leçon 4
Mise en place d'un media queries
Leçon 5
Faire fonctionner le menu
Leçon 6
Créer un premier sous-menu
Leçon 7
Mise en forme du sous-menu

Table des matières

Leçon 1

Mise en place du HTML

02m51
Leçon 2

Mise en forme du header

07m52
Leçon 3

Mise en forme des liens

05m34
Leçon 4

Mise en place d'un media queries

06m04
Leçon 5

Faire fonctionner le menu

08m57
Leçon 6

Créer un premier sous-menu

03m01
Leçon 7

Mise en forme du sous-menu

05m07
Leçon 8

Sélecteur CSS avancé

05m51
Leçon 9

Ajouter un nouveau dropdown

06m51
Leçon 10

Activer le dropdown cliqué

05m25
Leçon 11

Fermer les autres dropdowns

03m41
Leçon 12

Clic en dehors du dropdown pour le fermer

04m18
Leçon 13

Dropdown sur les petits Ă©crans

09m50
Leçon 14

Effectuer une rotation sur l'icone chevron

04m05
Leçon 15

Fermer le menu sur clic d'un lien

07m07
Leçon 16

Fermer le dropdown sur clic d'un lien

02m34

Aperçus

Avis des apprenants

DĂ©tail des avis
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 05/07/2025
5
Vraiment formidable ! Super tuto pour une super nav :-) Tout est mis en place progressivement et bien pensé. Un menu agréable à l'oeil et bien opérationnel même avec un sous-menu et pour toutes les tailles d'écran. Un grand merci Carl !
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 03/06/2025
5
Très interessant à tous les niveaux, super ! merci encore pour ces nouvelles connaissances . Didier
Carl Brison
Carl Brison
Merci beaucoup Didier, c'est vraiment très gentil ;-)
Regis Philippe
Regis Philippe
Publié le 29/05/2025
5
Toujours impeccable , j’attends la suite avec impatience. merci
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-) La suite arrive !

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source complet de ce tuto.
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
19,95€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h29 de vidĂ©o • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 791 autres en illimité
Plus de 20 nouvelles formations par mois
RĂ©siliable en 1 clic, Ă  tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complĂ©tion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)
Continuez votre progression

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

+ 1,400,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com
  • Logo adobe
  • Logo etapes
  • Logo nikon
  • Logo arte
  • Logo xp-pen
  • Logo citia
  • Logo universal
  • Logo jc-decaux
  • Logo cite-science
  • Logo credit-agricole
  • Logo om
  • Logo fff
Paiement 100% sécurisé

Vos données sont chiffrées et protégées pendant toute la transaction.

  • visa-mono
  • mastercard-alt
  • maestro-alt
  • paypal-mono
  • klarna-mono
  • apple-pay-mono
  • google-pay-mono
Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données