Comment créer un menu burger animé dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un menu burger animé (hamburger → croix) dans Webflow sans plugin.

Exemple

1. Créez le bouton burger

Créez un Div burger-btn contenant 3 Divs : burger-line-1, burger-line-2, burger-line-3. Chaque ligne : width 24px, height 2px, background de votre couleur, margin-bottom 5px. Ajoutez cursor: pointer sur le conteneur.

2. Ajoutez le CSS de transition

.burger-line-1, .burger-line-2, .burger-line-3 {
  transition: all 0.3s ease;
}
.burger-btn.open .burger-line-1 {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger-btn.open .burger-line-2 {
  opacity: 0;
}
.burger-btn.open .burger-line-3 {
  transform: rotate(-45deg) translate(5px, -5px);
}

3. Ajoutez le script de toggle

const burger = document.querySelector('.burger-btn');
const nav = document.querySelector('.mobile-nav');
burger.addEventListener('click', function() {
  burger.classList.toggle('open');
  nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
});

Conclusion

Un burger menu animé améliore l'expérience mobile. Cas d'usage :

• Navigation custom sur mobile
• Sidebar ou drawer menu
• Menus overlay plein écran