Upload multiple drag&drop;
Upload multiple drag&drop;
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
Mise en place du HTML
Leçon 2
Donner une ambiance générale en CSS
Donner une ambiance générale en CSS
Leçon 3
Mettre en forme le menu Nav
Mettre en forme le menu Nav
Leçon 4
Mettre en forme le menu Burger
Mettre en forme le menu Burger
Leçon 5
Mettre en place un media queries
Mettre en place un media queries
Leçon 6
Faire fonctionner le menu
Faire fonctionner le menu
Leçon 7
Flouter les liens non survolés
Flouter les liens non survolés
Plan détaillé du cours
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