Avez-vous déjà rêvé de transformer le menu burger standard de Webflow en quelque chose de plus dynamique et moderne ? Aujourd'hui, je vais vous montrer comment créer un menu burger qui évolue en une élégante icône croix.

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.

‍