Tout d'abord, dans votre projet Webflow, supprimez l'icône de menu burger par défaut. C'est simple : dites adieu à l'icône existante et préparons-nous à créer quelque chose de unique.
Étape 1 : Construire la Structure
Commencez par créer une nouvelle div que nous appellerons burger-menu-wrapper. Ce conteneur servira à envelopper notre nouveau menu burger. Ajoutez ensuite une div à l'intérieur de celle-ci, qui sera une des lignes du menu burger, et nommez-la burger-menu-line.
Étape 2 : Stylisation des Éléments
Maintenant, il est temps de donner du style à notre ligne. Ajustez les dimensions pour que la largeur soit de 100 %, afin qu'elle occupe toute la largeur du conteneur parent, et fixez la hauteur à 2 pixels pour une ligne fine et élégante.
Étape 3 : Supprimer les Paddings
Par défaut, Webflow peut ajouter du padding. Assurez-vous de le régler à 0 pour que votre ligne n'apparaisse pas comme un bloc mais bien comme une ligne fine.
Étape 4 : Dimensionnement du Wrapper
Revenez sur burger-menu-wrapper et définissez une largeur qui convient à notre design, par exemple, trois REM pourraient être parfaits.
Étape 5 : Duplication et Espacement
Dupliquez la ligne pour en avoir deux, puis, dans le burger-menu-wrapper, appliquez un display flex en mode colonne avec un espace (gap) de 0.5 REM entre les lignes. Vous avez maintenant votre icône de menu burger !
Étape 6 : Animation
Pour l'animation, il est plus efficace d'utiliser les Element Triggers de Webflow. Créez une nouvelle animation sous le nom burger-menu[open] et préparez-vous à animer les barres pour qu'elles se transforment en croix.
- Pour la ligne du haut : elle doit se déplacer légèrement vers le bas et ensuite pivoter de 45 degrés.
- Pour la ligne du bas : elle doit se déplacer vers le haut et pivoter de -45 degrés.
Étape 7 : Finitions de l'Animation
Assurez-vous que l'animation soit fluide en ajustant les paramètres d'"easing". Ease est souvent le choix préféré pour une transition naturelle.
Étape 8 : Animation de Fermeture
Dupliquez l'animation de l'ouverture et inversez simplement les états pour créer l'animation de fermeture, en renommant cette animation en burger-menu[close].
Félicitations ! Vous avez maintenant un menu burger personnalisé sur Webflow. Ce n'est qu'un exemple des nombreuses possibilités d'animations et de designs que vous pouvez réaliser avec les outils à votre disposition sur Webflow.
Pour aller plus loin et découvrir des menus burger encore plus sophistiqués, je vous invite à explorer les ressources disponibles sur CORIACE 💪. Vous y trouverez une mine de tutoriels et de formations pour parfaire vos compétences en Webflow.
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
Je m'inscris
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
Je m'inscris
