Comment créer un mega menu dans Webflow ?
Apprenez à créer un mega menu dans Webflow sans plugin avec les interactions natives et le CSS.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un mega menu dans Webflow sans plugin, uniquement avec les interactions natives et le CSS.
Exemple
| Élément | Classe CSS | Rôle |
|---|---|---|
| Nav item parent | nav-item | Élément déclencheur du mega menu |
| Mega menu container | mega-menu | Le panneau qui s'ouvre |
| Colonnes internes | mega-menu-col | Colonnes de liens ou contenus |
1. Créez la structure du mega menu
Dans votre Navbar, ajoutez un Div avec la classe nav-item contenant le lien déclencheur. À l'intérieur, ajoutez un second Div avec la classe mega-menu qui sera le panneau. Mettez mega-menu en display: none par défaut. Positionnez-le en absolute par rapport au nav-item (relative).
2. Organisez le contenu en colonnes
À l'intérieur du mega-menu, créez plusieurs Divs avec la classe mega-menu-col en display: flex. Ajoutez vos liens, titres de catégories et éventuellement des images ou icônes.
3. Ajoutez les interactions Webflow
Sur l'élément nav-item, créez une interaction :
- Trigger : Mouse over (Hover in)
- Action : Display mega-menu → block ou flex
- Hover out : Display mega-menu → none avec délai de 200ms
4. Gérez la fermeture au survol du mega menu
Ajoutez la même interaction "Mouse over" sur le mega-menu lui-même pour éviter qu'il se ferme quand la souris glisse de l'item vers le panneau. Hover out sur mega-menu : display none.
5. Fermez le mega menu au clic en dehors
Ajoutez ce script dans le <body> pour fermer le mega menu si l'utilisateur clique ailleurs sur la page.
// Ferme le mega menu si clic en dehors
document.addEventListener('click', function(e) {
document.querySelectorAll('.mega-menu').forEach(function(menu) {
if (!menu.closest('.nav-item').contains(e.target)) {
menu.style.display = 'none';
}
});
});Conclusion
Le mega menu améliore la navigation sur les sites avec beaucoup de pages. Cas d'usage :
- Sites e-commerce avec plusieurs catégories de produits
- Sites corporate avec de nombreuses rubriques
- SaaS avec plusieurs produits ou fonctionnalités
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
