NavBar Responsive #5 : Menu responsive avec double dropdown
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO NavBar Responsive #5 : Menu responsive avec double dropdown

Carl Brison
24,95€
klarna-condensed
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto, nous allons voir ensemble comment créer un menu de navigation responsive avec un double sous-menu dropdown en utilisant HTML, CSS et JavaScript.

1. Structure HTML

Notre structure HTML est simple et organisée. Nous avons une balise qui contient :

  • Un logo sous forme de lien.
  • Une liste de liens de navigation.
  • Un bouton "burger" pour l'affichage mobile.
  • Des menus déroulants (dropdown) avec plusieurs niveaux.

Le menu comprend des éléments de navigation principaux, et certains d'entre eux possèdent des sous-menus.
Un des sous-menus inclut même un niveau supplémentaire, permettant une navigation plus approfondie.

2. Mise en forme avec CSS

Le CSS permet d’assurer une présentation moderne et fluide :

  • Une police personnalisée via Google Fonts.
  • Un design coloré et attrayant avec un effet de flou sur les liens non sélectionnés.
  • Une gestion des menus déroulants avec des transitions fluides.
  • Un affichage optimisé pour les écrans mobiles avec un menu latéral et un bouton burger pour activer/désactiver le menu.
  • Une gestion des sous-menus pour qu'ils apparaissent et disparaissent en douceur.

3. Interaction avec JavaScript

Le JavaScript permet d'ajouter de l’interactivité :

  • Un bouton burger qui ouvre et ferme le menu sur mobile.
  • Un système de dropdowns qui s'ouvrent et se ferment au clic.
  • Une gestion des clics en dehors des menus pour refermer les dropdowns automatiquement.
  • Un script permettant de refermer le menu après avoir sélectionné un lien (utile pour une navigation fluide sur mobile).

4. Résultat final

Avec ce code, nous obtenons un menu ergonomique, moderne et responsive, qui fonctionne aussi bien sur ordinateur que sur mobile. Les animations et transitions rendent l'expérience utilisateur fluide et agréable. Si vous souhaitez personnaliser ce menu, vous pouvez facilement modifier les couleurs, la disposition ou encore ajouter des animations supplémentaires.

Je mets les codes de ce tuto à votre disposition.
Suggestion : et si vous passiez votre certification FrontEnd avec moi ?

É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
Donner une ambiance générale en CSS
Leçon 3
Mettre en forme le menu Nav
Leçon 4
Mettre en forme le menu Burger
Leçon 5
Mettre en place un media queries
Leçon 6
Faire fonctionner le menu
Leçon 7
Flouter les liens non survolés

Table des matières

Leçon 1Mise en place du HTML
04m16
Leçon 2Donner une ambiance générale en CSS
07m15
Leçon 3Mettre en forme le menu Nav
05m50
Leçon 4Mettre en forme le menu Burger
07m22
Leçon 5Mettre en place un media queries
06m12
Leçon 6Faire fonctionner le menu
07m22
Leçon 7Flouter les liens non survolés
03m48
Leçon 8Mettre en place les sous-menus de niveau 1
03m29
Leçon 9Mettre en forme les 1er sous menu
05m01
Leçon 10Faire fonctionner les sous-menus de niveau 1
05m51
Leçon 11Clic en dehors du dropdown pour le fermer
05m41
Leçon 12Retour aux petits écrans
03m24
Leçon 13Ajout d'un sous-menu de niveau 2
02m45
Leçon 14CSS Destop du sous-menu de niveau 2
06m55
Leçon 15CSS Mobile du sous-menu de niveau 2
05m35
Leçon 16Retour au JavaScript
04m52
Leçon 17Mise en forme mobile
04m37
Leçon 18Mise en forme desktop
06m39
Leçon 19Si site one page
06m31

Aperçus

Avis des apprenants

Détail des avis
16
Apprenants
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 18/07/2025
J'ai beaucoup moins pataugé avec le tuto d'un seul sous-menu qu'avec celui-là. C'est quand même pas simple. Et je pense qu'un seul sous-menu est préférable. Mais il n'est pas inutile de savoir faire ce genre de menu... avec beaucoup de révision :-) Merci beaucoup pour ce tuto, Carl et vos explications toujours bien interprétées.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie ;-)
Regis Philippe
Regis Philippe
Publié le 17/07/2025
on continu , encore et encore ....
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 16/06/2025
Super , tout ce travail en CSS avec les sélecteurs ... Faut suivre et pas ce perdre. Merci pour ce bon tuto Didier
Carl Brison
Carl Brison
Merci beaucoup Didier, c'est vraiment très gentil ;-)

Vos questions sur le cours

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

HTML , CSS

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source complet de ce tuto

Payer plus tard

Prix d'achat : 24,95 €
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 1388 tutos gratuits

Notre politique de protection des données