NavBar Responsive #5 : Menu responsive avec double dropdown

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 :

• NavBar Responsive #4 : Menu responsive avec barre d'outils
• NavBar Responsive #3 : Menu responsive avec sous-menus
• NavBar Responsive #2 : Améliorez votre menu avec un dropdown animé
• NavBar Responsive #1 : Dominez les Sélecteurs CSS pour un Menu Ultra-Design