Comment modifier le menu mobile dans Webflow

Un menu de navigation simple et intuitif est l’un des éléments de conception les plus importants de votre site. Il agit comme une carte, éloignant les visiteurs de la page principale. Avec le nombre croissant de personnes utilisant Internet sur leurs appareils mobiles, votre site Web devrait également avoir un menu de navigation adapté aux mobiles.

Heureusement, Webflow a facilité l’ajout d’une barre de menu hamburger pliable qui simplifiera votre site mobile. Continuez à lire pour savoir comment modifier ce menu mobile dans Webflow.

Comment ajouter une barre de navigation

Le menu hamburger est un élément de conception essentiel lorsqu’il s’agit d’un espace horizontal limité. Cela élimine le besoin d’une barre de navigation fixe encombrante qui occupe un espace précieux.

Dans Webflow, ce menu et ses fonctions sont intégrés à l’élément NavBar. Pour ajouter cet élément à votre conception, vous devez suivre quatre étapes simples :

• Appuyez sur l’icône « + » en haut du panneau de gauche pour ouvrir le panneau « Ajouter ».

• Faites défiler jusqu’à la section « Composants ».

• Appuyez et maintenez l’élément NavBar.

• Faites glisser l’élément vers l’en-tête de la page.

Comment modifier le menu mobile

Une fois que vous avez ajouté une barre de navigation à votre site Web, vous pouvez styliser et personnaliser ce menu de plusieurs manières différentes.

Comment ajouter plus de liens au menu

L’élément de barre de navigation contient un bouton de menu et un menu de navigation, ce dernier contenant des liens de navigation. Lorsque vous l’ajouterez à votre conception, il y aura quelques espaces réservés de liens que vous pourrez supprimer ou modifier avec des liens vers votre site Web.

Suivez ces étapes pour ajouter d’autres liens de navigation :

• Cliquez sur n’importe quel élément dans la barre de navigation.

• Accédez au panneau Paramètres des éléments sur la droite.

• Cliquez sur l’icône d’engrenage pour ouvrir « Paramètres ».

• Faites défiler jusqu’à la section Paramètres de la barre de navigation.

• Cliquez sur le bouton « Ajouter un lien ».

Maintenant que vous avez suffisamment de liens pour toutes les pages pertinentes du site Web, il est temps de faire le lien proprement dit.

• Sélectionnez un lien de navigation.
• Accédez au panneau Paramètres des éléments.

• Recherchez la section Paramètres de lien.

• Entrez l’URL de la page Web spécifiée dans le champ « URL ».

Comment changer l’animation des menus

Dans Webflow, vous pouvez également modifier l’affichage du menu mobile lorsque les visiteurs cliquent sur le bouton de menu. Vous pouvez choisir parmi trois types d’animations de révélation :

• Menu déroulant – Par défaut, le menu mobile disparaît de la barre de navigation lorsque le visiteur clique sur le bouton de menu. Il occupera toute la largeur de la fenêtre du navigateur.
• Droite – Si vous sélectionnez cette animation de développement, votre menu mobile apparaîtra sur le côté droit de l’écran. Ce menu occupera toute la hauteur de la fenêtre du navigateur.
• En haut à gauche – Ce type de menu est identique au menu En haut à droite, sauf que le menu de navigation se déplace depuis le côté gauche de l’écran.

Pour définir l’animation d’expansion souhaitée, procédez comme suit :

• Sélectionnez n’importe quel élément dans la barre de navigation.

• Accédez au panneau Paramètres des éléments sur le côté droit de l’écran.

• Appuyez sur l’icône d’engrenage pour lancer les paramètres.

• Accédez à la section « Paramètres de la barre de navigation ».

• Cliquez sur l’option « Type ».

• Sélectionnez votre style préféré dans le menu déroulant.

Dans la section NavBar Settings, vous pouvez également gérer les éléments suivants :

• Ease Opening : Le type de courbe utilisé pour animer la transition ouverte.
• Close Ease : le type de courbe utilisé pour animer la transition de fermeture.
• Durée : durée d’affichage du menu.

Notez que la durée de la transition est mesurée en millisecondes.

Comment changer le style des menus

Webflow a facilité le style de n’importe quelle partie de la barre de navigation, ce qui facilite l’intégration d’un menu mobile dans la conception de votre site Web.

Pour styliser le bouton de menu, procédez comme suit :

• Sélectionnez le bouton de menu.

• Allez dans le panneau Style à droite (icône pinceau).

Le panneau Style vous permet de modifier chaque aspect du bouton de menu. Le plus souvent, les concepteurs modifient la couleur et la taille de l’arrière-plan du bouton.

Pour modifier la couleur d’arrière-plan, procédez comme suit :

• Allez dans la section « Arrière-plans ».

• Appuyez sur l’icône représentant une goutte de couleur pour ouvrir le sélecteur de couleurs.

• Choisissez la couleur que vous voulez.

Si vous souhaitez modifier la taille de l’icône du hamburger, procédez comme suit :

• Accédez à la section Typographie.

• Augmentez ou diminuez la taille de l’icône dans le champ Aa.

Vous pouvez également changer la couleur de l’icône dans la case ci-dessus, marquée d’un A et d’une goutte de couleur.

Bien qu’il existe de nombreuses façons de personnaliser le bouton de menu, vous ne pouvez pas le remplacer par un élément de texte ou une image personnalisée.

La navigation mobile simplifiée

Lors de la conception d’un menu mobile, vous souhaitez tirer le meilleur parti d’un espace assez limité. Alors, essayez de ne pas surcharger le menu avec des options afin de ne pas confondre les visiteurs. Assurez-vous également que les éléments du menu sont courts, clairs et faciles à lire.

Après cela, vous pouvez jouer avec le style et l’animation du menu pour garder vos visiteurs engagés à chaque étape du chemin.

Avez-vous essayé d’ajouter un menu mobile à votre site ? Combien d’options avez-vous inclus ? Faites-le nous savoir dans les commentaires ci-dessous.