Comment modifier le menu mobile dans Webflow

Un menu de navigation simple et intuitif est l'un des éléments de conception les plus essentiels de votre site Web. Il agit comme une carte, guidant vos visiteurs au-delà de la page d'accueil. 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.

Comment modifier le menu mobile dans Webflow

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

Comment ajouter une barre de navigation

Le menu hamburger est un élément de conception essentiel lorsque vous travaillez avec un espace horizontal limité. Il élimine le besoin d'une barre de navigation fixe encombrante qui occupe un espace précieux.

Sur Webflow, ce menu et ses fonctionnalités sont construits à l'intérieur de l'élément NavBar. L'ajout de cet élément à votre conception nécessite quatre étapes simples :

  1. Appuyez sur l'icône "+" en haut du panneau de gauche pour ouvrir le panneau "Ajouter".
    Comment modifier le menu mobile dans Webflow
  2. Faites défiler jusqu'à la section "Composants".
    Comment modifier le menu mobile dans Webflow
  3. Cliquez et maintenez l'élément "NavBar".
    Comment modifier le menu mobile dans Webflow
  4. Faites glisser l'élément vers l'en-tête de la page.
    Comment modifier le menu mobile dans Webflow

Comment modifier le menu mobile

Une fois que vous avez ajouté une barre de navigation à votre site Web, vous pouvez ajouter du style et de la personnalité à ce menu de différentes manières.

Comment ajouter plus de liens au menu

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

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

  1. Cliquez sur n'importe quel élément à l'intérieur de la barre de navigation.
    Comment modifier le menu mobile dans Webflow
  2. Dirigez-vous vers le panneau "Paramètres des éléments" sur la droite.
    Comment modifier le menu mobile dans Webflow
  3. Appuyez sur l'icône d'engrenage pour ouvrir les "Paramètres".
    Comment modifier le menu mobile dans Webflow
  4. Faites défiler jusqu'à la section "Paramètres de la barre de navigation".
    Comment modifier le menu mobile dans Webflow
  5. Appuyez sur le bouton "Ajouter un lien".
    Comment modifier le menu mobile dans Webflow

Maintenant que vous avez un nombre suffisant de liens pour toutes les pages pertinentes de votre site Web, il est temps de faire le lien proprement dit.

  1. Sélectionnez un lien de navigation.
  2. Allez dans le panneau "Paramètres des éléments".
    Comment modifier le menu mobile dans Webflow
  3. Localisez la section "Paramètres de lien".
    Comment modifier le menu mobile dans Webflow
  4. Entrez l'URL de la page Web désignée dans le champ "URL".
    Comment modifier le menu mobile dans Webflow

Comment changer l'animation des menus

Sur Webflow, vous pouvez également modifier la façon dont le menu mobile apparaît lorsque les visiteurs cliquent sur le bouton de menu. Vous pouvez choisir entre trois types d'animations de révélation :

  • Drop Down - Par défaut, le menu mobile se déroulera de la barre de navigation une fois que le visiteur appuie sur le bouton de menu. Il occupera toute la largeur de la fenêtre du navigateur.
  • Au-dessus de la droite - Si vous sélectionnez cette animation de révélation, votre menu mobile apparaîtra du côté droit de l'écran. Ce menu occupera toute la hauteur de la fenêtre du navigateur.
  • Au-dessus de la gauche – Ce type de menu est identique à Au-dessus de la droite, sauf que le menu de navigation se déplacera du côté gauche de votre écran.

Pour définir l'animation de révélation souhaitée, procédez comme suit :

  1. Sélectionnez n'importe quel élément dans la barre de navigation.
    Comment modifier le menu mobile dans Webflow
  2. Accédez au panneau "Paramètres des éléments" sur le côté droit de votre écran.
    Comment modifier le menu mobile dans Webflow
  3. Appuyez sur l'icône d'engrenage pour lancer "Paramètres".
    Comment modifier le menu mobile dans Webflow
  4. Accédez à la section "Paramètres de la barre de navigation".
    Comment modifier le menu mobile dans Webflow
  5. Cliquez sur l'option "Type".
    Comment modifier le menu mobile dans Webflow
  6. Sélectionnez le style préféré dans le menu déroulant.
    Comment modifier le menu mobile dans Webflow

Dans la section "Paramètres de la barre de navigation", vous pouvez également contrôler les éléments suivants :

  • Easing open : le type de courbe utilisé pour animer la transition ouverte.
  • Easing close : le type de courbe utilisé pour animer la transition de fermeture.
  • Durée : combien de temps il faut pour que le menu apparaisse.

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

Comment changer le style du menu

Webflow a facilité le style de n'importe quelle partie de la barre de navigation, vous permettant d'intégrer de manière transparente le menu mobile dans la conception de votre site Web.

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

  1. Sélectionnez le bouton de menu.
    Comment modifier le menu mobile dans Webflow
  2. Allez dans le panneau "Style" sur la droite (l'icône du pinceau).
    Comment modifier le menu mobile dans Webflow

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

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

  1. Allez dans la section "Arrière-plans".
    Comment modifier le menu mobile dans Webflow
  2. Appuyez sur l'icône de la goutte de couleur pour ouvrir le "Sélecteur de couleurs".
    Comment modifier le menu mobile dans Webflow
  3. Sélectionnez la couleur souhaitée.
    Comment modifier le menu mobile dans Webflow

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

  1. Accédez à la section "Typographie".
    Comment modifier le menu mobile dans Webflow
  2. Augmentez ou diminuez la taille de l'icône dans le champ "Aa".
    Comment modifier le menu mobile dans Webflow

Vous pouvez également modifier la couleur de l'icône dans le champ ci-dessus, marqué par la lettre A et 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 pour éviter de dérouter vos visiteurs. Assurez-vous également que les choix de menu sont courts, clairs et facilement lisibles.

Après cela, vous pouvez jouer avec le style et l'animation du menu pour garder vos visiteurs intéressés à chaque étape du processus.

Avez-vous essayé d'ajouter un menu mobile à votre site Web ? Combien d'options avez-vous inclus ? Faites-nous savoir dans la section commentaires ci-dessous.

Sign up and earn $1000 a day ⋙

Leave a Comment

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Qu'est-ce qu'un VPN ? Quels sont ses avantages et ses inconvénients ? Avec WebTech360, découvrons la définition d'un VPN et comment appliquer ce modèle et ce système au travail.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La sécurité Windows ne se limite pas à une simple protection contre les virus. Elle protège contre le phishing, bloque les rançongiciels et empêche l'exécution d'applications malveillantes. Cependant, ces fonctionnalités sont difficiles à repérer : elles sont dissimulées derrière des couches de menus.

Le codage n’est pas aussi difficile que vous le pensez

Le codage n’est pas aussi difficile que vous le pensez

Une fois que vous aurez appris et essayé par vous-même, vous constaterez que le cryptage est incroyablement facile à utiliser et incroyablement pratique pour la vie de tous les jours.

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Dans l'article suivant, nous présenterons les opérations de base pour récupérer des données supprimées sous Windows 7 avec l'outil d'assistance Recuva Portable. Avec Recuva Portable, vous pouvez stocker vos données sur n'importe quelle clé USB et les utiliser à tout moment. Compact, simple et facile à utiliser, cet outil offre les fonctionnalités suivantes :

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

CCleaner recherche les fichiers en double en quelques minutes seulement, puis vous permet de décider lesquels peuvent être supprimés en toute sécurité.

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Déplacer le dossier de téléchargement du lecteur C vers un autre lecteur sous Windows 11 vous aidera à réduire la capacité du lecteur C et aidera votre ordinateur à fonctionner plus facilement.

Comment arrêter les mises à jour Windows sur PC

Comment arrêter les mises à jour Windows sur PC

Il s’agit d’un moyen de renforcer et d’ajuster votre système afin que les mises à jour se produisent selon votre propre calendrier, et non celui de Microsoft.

Comment afficher les extensions de fichiers et les afficher sous Windows

Comment afficher les extensions de fichiers et les afficher sous Windows

L'Explorateur de fichiers Windows propose de nombreuses options pour modifier l'affichage des fichiers. Ce que vous ignorez peut-être, c'est qu'une option importante est désactivée par défaut, bien qu'elle soit cruciale pour la sécurité de votre système.

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

Avec les bons outils, vous pouvez analyser votre système et supprimer les logiciels espions, les logiciels publicitaires et autres programmes malveillants qui peuvent se cacher sur votre système.

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

Vous trouverez ci-dessous une liste de logiciels recommandés lors de l'installation d'un nouvel ordinateur, afin que vous puissiez choisir les applications les plus nécessaires et les meilleures sur votre ordinateur !

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Conserver l'intégralité d'un système d'exploitation sur une clé USB peut s'avérer très utile, surtout si vous n'avez pas d'ordinateur portable. Mais ne pensez pas que cette fonctionnalité soit limitée aux distributions Linux ; il est temps d'essayer de cloner votre installation Windows.

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

La désactivation de certains de ces services peut vous faire économiser une quantité importante de batterie sans affecter votre utilisation quotidienne.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

Ctrl + Z est une combinaison de touches extrêmement courante sous Windows. Elle permet d'annuler des actions dans tous les domaines de Windows.

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Les URL raccourcies sont pratiques pour nettoyer les liens trop longs, mais elles masquent également la véritable destination. Pour éviter les logiciels malveillants ou le phishing, cliquer aveuglément sur ce lien n'est pas une bonne idée.

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Après une longue attente, la première mise à jour majeure de Windows 11 est officiellement sortie.