Apprendre à réaliser un Menu Responsive multi niveaux
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h42
de formation
20
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Apprendre à réaliser un Menu Responsive multi niveaux

4.8/5 Trustpilot (1391 avis) Satisfait ou remboursé
1h42
de formation
20
leçons vidéo
1
chapitre

Dans ce tuto CSS, je vous propose d'apprendre à réaliser un menu responsive comportant plusieurs sous-menus.
Cela signifie que nous mettrons en place des menus qui au survol de la souris, ouvriront une liste de sous-menus qui elle-même pourra ouvrir une autre liste de sous-menus.

Pour réaliser cela, nous utiliserons uniquement les langages HTML et CSS. Nous n'utiliserons pas de langage de programmation tel que le JavaScript.
Afin de mener à bien notre code, nous devrons mobiliser un certain nombre de connaissances en CSS.
Toutes ces connaissances vous ont déjà été proposées dans différents tutos, par mes soins.

Voici les connaissances que nous devrons exploiter :

Comme j'aime à le répéter : "Plus j'ai de connaissances et plus c'est facile !"

À la fin de ce tuto, vous serez en mesure de réaliser une zone de navigation responsive, comportant plusieurs niveaux de menus.
Je mets les codes de ce tuto à votre disposition ainsi qu'un QCM pour valider vos connaissances !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place de la zone header
Leçon 2
Positionner les zones droite et gauche
Leçon 3
Mettre en forme la zone nav
Leçon 4
Positionner la zone nav pour les petits écrans
Leçon 5
Installer une icone de menu
Leçon 6
Manipuler l'icone du menu
Leçon 7
Ajouter une nouvelle icone

Table des matières

Leçon 1

Mise en place de la zone header

10m20
Leçon 2

Positionner les zones droite et gauche

05m08
Leçon 3

Mettre en forme la zone nav

06m05
Leçon 4

Positionner la zone nav pour les petits écrans

05m26
Leçon 5

Installer une icone de menu

07m13
Leçon 6

Manipuler l'icone du menu

03m42
Leçon 7

Ajouter une nouvelle icone

05m36
Leçon 8

Créer un sous-menu

07m11
Leçon 9

Faire apparaitre et disparaitre le sous-menu

06m53
Leçon 10

Améliorer l'apparition du sous-menu

03m17
Leçon 11

Préparer un second sous-menu

05m54
Leçon 12

Créer le second sous-menu

04m04
Leçon 13

Utiliser un combinateur

04m42
Leçon 14

Créer un nouveau sous-menu

04m20
Leçon 15

Modifier la couleur des flèches

01m31
Leçon 16

Dynamiser la largeur du menu

04m31
Leçon 17

Définir la place des sous-menus

06m03
Leçon 18

Modifier le fonctionnement des sous-menus

02m46
Leçon 19

Mettre en place des espaces visuels

05m29
Leçon 20

Pour aller plus loin

02m14

Avis des apprenants

Détail des avis
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Eddy Verly
Eddy Verly
Publié le 10/05/2025
Bonjour Carl, Excellent tuto, comme d'habitude, j'ai appris beaucoup chose. Merci pour ce partage. Eddy
Carl Brison
Carl Brison
Merci beaucoup Eddy, pour votre commentaire. C'est très gentil ;-)
Alain Tardif
Alain Tardif
Publié le 08/02/2025
Merci Carl pour ce cours. C'était vraiment une gymnastique mentale, entre les positions et les combinateurs, que je vais m'empresser d'aller revoir. La construction des sous-sous-menus m'a particulièrement cassé la tête au niveau CSS, mais vos explications m'ont grandement aidé à démêler ces concepts complexes. J'apprécie votre approche pédagogique qui rend ces notions abstraites plus accessibles. Validé 100%
Carl Brison
Carl Brison
C'est vrai que cela peut très vite devenir complexe. Merci beaucoup pour votre commentaire, Alain ;-)
Valérie Arno
Valérie Arno
Publié le 07/05/2024
Super tuto très attendu :-) Je ne pensais pas pouvoir faire un tel menu rien qu'en CSS. J'ai souvent essayé d'en faire un mais j'ai vite abandonné. Vous avez réglé les affichages des sous-menus d'une main de maître. Et toujours sereinement. Bravo ! Et un grand merci. À bientôt Carl.
Carl Brison
Carl Brison
Merci beaucoup Valérie. Oui, celui là, Je l'ai fait pour vous ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
24,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h42 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€ /mois
Sans engagement
Cette formation + 6 781 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
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)

Formations complémentaires

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

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1425 tutos gratuits

Notre politique de protection des données