Comment créer un mega menu dans Webflow ?

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

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