Comment créer un menu déroulant dans WordPress (Guide du débutant)

Voulez-vous créer un menu déroulant et l’ajouter à votre site Web WordPress?

Un menu déroulant affiche une liste de liens lorsque vous passez votre souris sur un élément du menu.

Nous utilisons un menu déroulant sur WPBeginner, allez-y et passez votre souris sur le menu de navigation en haut.

Dans ce guide du débutant, nous allons vous montrer comment créer facilement un menu déroulant dans WordPress avec des instructions pas à pas.

Pourquoi utiliser les menus déroulants dans WordPress?

WordPress est livré avec un système de gestion de menus intégré qui vous permet d’ajouter facilement des menus de navigation à votre site WordPress.

Les menus de navigation sont des liens vers les pages principales de votre site Web. Ils apparaissent généralement sur le dessus, sous la forme d’une rangée horizontale, juste à côté du logo du site.

Menu de navigation typique avec une rangée horizontale de liens

Si vous démarrez un blog ou créez un site Web avec seulement quelques pages, vous pouvez les ajouter en une seule ligne.

Toutefois, si vous exploitez une boutique en ligne ou un site Web volumineux, vous pouvez ajouter d’autres liens au menu de navigation.

Les menus déroulants vous aident à résoudre le problème d’espace limité en affichant les liens de menu uniquement lorsque les utilisateurs déplacent leur souris sur un élément parent. Ils vous permettent également d’organiser la structure du menu par sujet ou par hiérarchie.

Exemple de menu déroulant

Enfin, ils ont l’air très bien aussi.

Cela dit, voyons maintenant comment créer facilement des menus déroulants WordPress pour les ajouter à votre site Web.

Étape 0. Choix d’un thème avec prise en charge du menu déroulant

WordPress est livré avec un système de gestion de menus intégré, mais l’affichage de ces menus dépend entièrement de votre thème WordPress.

Presque tous les thèmes WordPress prennent en charge les menus déroulants par défaut. Cependant, certains thèmes peuvent ne pas avoir un support de menu approprié.

Vous devez vous assurer que vous utilisez un thème WordPress prenant en charge les menus déroulants.

Comment savoir si le thème que vous utilisez prend en charge le menu déroulant?

Vous pouvez simplement visiter le site Web du thème où vous trouverez un lien vers la démonstration du thème. À partir de là, vous pouvez voir si la démo affiche un menu déroulant dans le menu de navigation.

Si ce n’est pas le cas, vous devrez trouver un thème WordPress qui le fasse.

Consultez notre guide sur la manière de choisir le thème WordPress idéal pour votre site Web.

Voici quelques excellents thèmes qui prennent en charge le menu déroulant.

  • Astra – C’est un thème WordPress polyvalent livré avec plusieurs sites de démarrage et des tonnes de fonctionnalités.
  • Thèmes StudioPress – Construits au-dessus du cadre de thèmes Genesis, ces thèmes professionnels sont hautement optimisés pour la performance.
  • OceanWP – Un thème WordPress populaire qui convient à tout type de sites Web.
  • Générateur Ultra – Powered by Themify, ce thème WordPress « drag and drop » est livré avec de superbes modèles et des options de thème flexibles.
  • Divi – thème populaire de Elegant Themes qui utilise le constructeur de pages Divi et qui est livré avec une multitude de fonctionnalités de glisser-déposer, y compris des menus déroulants.

Cela dit, voyons maintenant comment créer un menu déroulant WordPress.

Étape 1. Création d’un menu de navigation dans WordPress

Si vous avez déjà configuré un menu de navigation sur votre site Web, vous pouvez passer à l’étape suivante.

Commençons par créer un menu simple.

Aller à Apparence »Menus page et cliquez sur le lien « Créer un nouveau menu » en haut.

Créer un menu

Ensuite, vous devez donner un nom à votre menu de navigation. Ce nom ne sera pas visible publiquement sur votre site web. Le nom du menu a pour but de vous aider à identifier le menu dans la zone d’administration de WordPress.

Nom du menu

Entrez un nom pour votre menu, puis cliquez sur le bouton «Créer un menu».

WordPress va maintenant créer un nouveau menu vide pour vous.

Ajoutons les liens du haut au menu de navigation. Ces éléments apparaîtront dans la rangée supérieure de votre menu.

Sélectionnez simplement les pages que vous souhaitez ajouter dans la colonne de gauche et cliquez sur le bouton « Ajouter au menu ». Vous pouvez également sélectionner des articles de blog, des catégories ou ajouter des liens personnalisés.

Ajouter des pages au menu

Vous verrez maintenant que ces pages apparaissent dans la colonne de droite sous votre nouveau menu.

Étape 2. Ajout de sous-éléments à un menu

Les sous-éléments sont les éléments qui apparaîtront dans le menu déroulant. Selon la manière dont vous souhaitez organiser vos menus, vous pouvez les ajouter sous n’importe quel élément existant.

Dans l’intérêt de ce tutoriel, nous ajouterons des catégories sous le lien du blog.

Sélectionnez simplement les éléments que vous souhaitez ajouter dans la colonne de gauche, puis cliquez sur le bouton « Ajouter au menu ». Vos articles vont maintenant apparaître dans la colonne de droite.

Nouveaux éléments de menu ajoutés au menu

Cependant, ces liens apparaîtront comme des éléments ordinaires. Nous devons en faire un sous-élément d’un menu parent.

Vous pouvez simplement faire glisser un élément de menu et le placer sous l’élément parent. Déplacez-le légèrement vers la droite et cela deviendra un sous-élément.

Ajout d'éléments de sous-menu pour créer un menu déroulant

Répétez le processus pour tous les liens que vous souhaitez afficher dans le menu déroulant.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.

Étape 3. Publiez votre menu déroulant

Si vous modifiez un menu déjà actif sur votre site Web, il apparaîtra immédiatement sur votre site Web.

Cependant, s’il s’agit d’un nouvel élément de menu, vous devez maintenant choisir un emplacement de thème pour afficher ce menu.

Les thèmes WordPress peuvent afficher des menus à différents endroits. Chaque thème définit ses propres emplacements de menu et vous pouvez sélectionner le menu que vous souhaitez y afficher.

Vous trouverez cette option dans la colonne de droite sous ‘Paramètres du menu’. Sélectionnez une option en regard du paramètre « Emplacement d’affichage » et cliquez sur le bouton « Enregistrer le menu ».

Choisissez l'emplacement du thème

Vous pouvez maintenant visiter votre site Web pour voir votre menu déroulant en action.

Aperçu du menu déroulant

Conseils sur la création de menus déroulants interactifs

Les menus de navigation sont importants car c’est le premier endroit où vos utilisateurs chercheront s’ils veulent voir des informations spécifiques.

Les utiliser correctement aidera vos utilisateurs à se repérer dans votre site Web. Il vous aidera également à obtenir davantage de pages vues, de conversions et de ventes sur votre site Web.

Voici quelques conseils pour rendre vos menus de navigation plus interactifs avec les menus déroulants.

1. Vous pouvez créer des menus déroulants multi-niveaux

Si un lien est un sous-élément d’un autre lien, il apparaît dans le menu déroulant. Vous pouvez également ajouter un sous-élément sous un autre sous-élément pour créer des menus déroulants à plusieurs niveaux.

Menus multi niveaux

Votre thème les afficherait automatiquement sous forme de sous-menu dans la liste déroulante.

Menu déroulant à plusieurs niveaux

2. Vous pouvez également créer plusieurs menus déroulants

Vous pouvez créer un menu déroulant sous n’importe quel lien du haut de votre menu. Vous pouvez même ajouter plusieurs menus déroulants dans votre menu de navigation principal.

Plusieurs menus déroulants dans le menu principal

3. Créer des menus avec un aperçu en direct

Si votre menu devient trop compliqué, vous pouvez passer à l’aperçu visuel. Aller à Apparence »Personnaliser pour lancer le personnalisateur de thème en direct.

De là, cliquez sur l’onglet ‘Menus’ puis sélectionnez votre menu de navigation. Vous verrez maintenant un éditeur de menu glisser-déposer dans la colonne de gauche avec un aperçu en direct de votre site dans le volet de droite.

Personnaliser les menus WordPress avec un aperçu en direct

4. Créer un grand méga-menu sous forme de liste déroulante dans WordPress

Les menus déroulants ne montrent qu’un menu déroulant à la fois. Et si vous vouliez afficher la structure complète de votre site Web sous la forme d’un méga-menu qui apparaît uniquement lorsque les utilisateurs survolent le menu principal?

Exemple de méga menu

Les méga-menus apparaissent sous forme de menu déroulant, mais ils peuvent afficher beaucoup plus de liens, de sous-menus, etc. Pour des instructions détaillées, consultez notre didacticiel pas à pas sur la création d’un méga-menu dans WordPress.

Nous espérons que cet article vous a aidé à apprendre à créer facilement un menu déroulant dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur la création d’un menu de navigation flottant collant dans WordPress et sur la manière d’ajouter des icônes d’image aux menus de navigation dans WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.

8 réflexions au sujet de “Comment créer un menu déroulant dans WordPress (Guide du débutant)”

  1. Bonjour,
    Merci pour vos articles super intéressants.
    Je viens de créer mon site et j’ai un gros soucis avec mes sous-menus : ils ne restent pas affichés suffisamment longtemps pour que l’on puisse cliquer dessus !!
    J’ai eu beau les faire et refaire, je ne trouve pas de solution.
    Auriez-vous une idée ?
    Je vous en remercie par avance et vous souhaite une excellente journée.
    Rachel

    Répondre
  2. Bonjour, Merci pour cet article très bien fait.
    Je cherche à créer un menu non cliquable comme le votre pour « Nos services ». Pouvez-vous expliquer comment vous avez fait ?

    J’ai vu qu’on pouvait utiliser le code html : https://# , mais une fois le menu affiché, le lien est quand même cliquable et renvoie vers cette page : about:blank#blocked

    merci !

    Répondre
    • Bonjour Clara,

      vous n’êtes pas loin de la bonne solution : dans votre URL, ne mettez pas « https://# », mais tout simplement « # ».

      Bonne modification de site web 🙂

      Répondre
    • Bien sûr ! Plusieurs possibilités : soit en regardant les options du thème (il est possible que modifier la couleur et la typo soit déjà prévu dans les paramètres de la section « Apparence > Personnaliser »), soit en ayant recours au langage CSS, qui permettra de modifier l’apparence de tous les éléments de la page, mais là c’est un peu plus technique 😉

      Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.