Guides/Modifier votre site/Menus/Créer des menus déroulants

Créer des menus déroulants

Un menu déroulant, ou sous-menu, affiche des éléments supplémentaires lorsque vous passez la souris ou cliquez sur un élément de votre menu. Cela peut être très utile pour garder votre menu épuré et organisé. Ce guide vous explique comment créer un menu déroulant.

Didacticiel vidéo

Créer un menu déroulant

Procédez comme suit pour créer un menu déroulant.

📌

Pour savoir quelle section de ce guide suivre, rendez-vous sur votre tableau de bord et consultez la section Apparence sur le côté gauche. Si Éditeur s’affiche, utilisez la section Éditeur de site de ce guide. Sinon, utilisez les instructions du tableau de bord ou de l’outil de personnalisation.

Suivez ces étapes pour ajouter des éléments déroulants au menu de votre site via le bloc Navigation :

  1. À partir du tableau de bord de votre site, accédez à Apparence → Éditeur.
  2. Sélectionnez Modèles et choisissez un modèle incluant votre menu, tel que Accueil ou Page d’accueil.
  3. Ouvrez la vue en liste en haut à gauche de votre écran.
  4. Sélectionnez le bloc Navigation (qui peut être imbriqué dans d’autres blocs comme En-tête, Groupe ou Ligne).
  5. Dans les paramètres de la colonne latérale, survolez un élément de menu et cliquez sur les trois points () qui apparaissent.
  6. Cliquez sur « Ajouter un lien de sous-menu ».
  7. Sélectionnez la première page à afficher dans le menu déroulant.
  8. Répétez les étapes 3 à 5 jusqu’à ce que vous ayez ajouté tous les éléments de sous-menu souhaités.
  9. Cliquez sur le bouton Enregistrer.

Vous pouvez également créer un menu déroulant à l’aide de la barre d’outils du bloc Navigation :

  1. Cliquez sur l’élément de menu que vous souhaitez transformer en menu déroulant.
  2. Une barre d’outils s’affiche au-dessus de l’élément de menu, où vous trouverez le bouton Ajouter un sous-menu (l’icône ressemble à une flèche incurvée avec trois lignes horizontales à côté).
  3. Cliquez sur le bouton Ajouter un sous-menu dans la barre d’outils pour transformer cet élément de menu en un menu déroulant.
  4. Cliquez sur l’icône + ou sur l’option Ajouter un lien qui s’affiche pour ajouter de nouveaux liens à votre nouveau menu déroulant.
  5. Cliquez sur Enregistrer pour enregistrer vos modifications.

Vous pouvez également choisir le mode d’ouverture de vos menus déroulants : au survol ou au clic.

Créer des menus déroulants avec l’assistant IA

L’assistant IA peut créer des menus déroulants et une navigation imbriquée directement sur votre site. Voici quelques exemples de commandes :

  • « Crée un menu déroulant Entraînement avec trois sous-menus : Compétences, Salle de visionnage et Préparation physique. »
  • « Déplace l’élément de menu Contact dans un sous-menu de À propos. »
  • « Ajoute un sous-menu sous Calendrier avec les éléments : Stages, Camps et Séances individuelles. »
  • « Configure mes menus déroulants pour qu’ils s’ouvrent au clic et non au survol. »

Vous pouvez créer un élément de menu non cliquable, utile pour les menus déroulants si vous souhaitez que l’élément de menu principal contienne des sous-menus sans pour autant rediriger vers une page. L’astuce consiste à utiliser un symbole # comme lien de l’élément de menu. Il est toujours possible de cliquer sur l’élément, mais il ne redirigera pas vers une nouvelle page. Procédez comme suit pour créer un élément de menu non cliquable.

📌

Pour savoir quelle section de ce guide suivre, rendez-vous sur votre tableau de bord et consultez la section Apparence sur le côté gauche. Si Éditeur s’affiche, utilisez la section Éditeur de site de ce guide. Sinon, utilisez les instructions du tableau de bord ou de l’outil de personnalisation.

Procédez comme suit pour créer un élément de menu non cliquable :

  1. À partir du tableau de bord de votre site, accédez à Apparence → Éditeur.
  2. Sélectionnez Modèles et choisissez un modèle incluant votre menu, tel que Accueil ou Page d’accueil.
  3. Ouvrez la vue en liste dans le coin supérieur gauche de votre écran (il s’agit de l’icône qui ressemble à trois lignes horizontales superposées).
  4. Sélectionnez le bloc Navigation (qui peut être imbriqué dans d’autres blocs comme En-tête, Groupe ou Ligne).
  5. Cliquez sur l’outil d’insertion de bloc + pour ajouter un nouvel élément de menu.
  6. Dans la fenêtre qui s’affiche, cliquez sur Ajouter un bloc et choisissez l’option Lien personnalisé.
  7. Saisissez un symbole # et appuyez sur Entrée ou Retour sur votre clavier.
  8. Cliquez sur l’icône en forme de crayon pour modifier le nouvel élément de menu. Écrivez ce que vous souhaitez que l’élément de menu indique dans le champ « Texte ». Laissez uniquement le symbole # dans le champ « Lien » pour en faire un lien non cliquable.
  9. Cliquez sur le bouton « Enregistrer » pour valider la modification.
Un symbole # est inséré dans le champ URL
Pour créer un élément de menu sans lien, ajoutez le symbole # dans le champ URL.

Vous pouvez également modifier un lien de menu existant pour le rendre non cliquable. Cliquez sur l’élément de menu existant et une barre d’outils apparaîtra au-dessus de l’élément de menu, où vous trouverez le bouton Lien (l’icône ressemble à un lien littéral d’une chaîne). Modifiez l’élément de menu et remplacez le lien actuel par le symbole #. Le GIF ci-dessous illustre la procédure :

Copied to clipboard!