Il arrive parfois que l'on ai besoin de créer un menu dont un ou plusieurs éléments parents ne renvoient vers aucun contenu.
Par exemple, on souhaite qu'au survol ou au clic de l'élément parent, un sous menu se déroule.
Il existe une solution agréablement simple sous WordPress, je vais vous l'expliquer dans ce court article.
Connectez-vous d'abord à votre back-office (administration) de WordPress, survolez avec la souris le module "Apparence" dans la colonne à gauche de l'écran, puis cliquez sur "Menus".
Nous arrivons alors sur une page avec notre menu principal, et le détail de son arborescence (éléments parents et éléments enfants).
Pour chaque élément parent que vous souhaitez "non cliquable", il suffit de les remplacer par des "Liens".
Méthode avec code Javascript
Voici la marche à suivre :
- dans le champ "Adresse web" : javascript: return false;
- dans le champ "Cible du lien" : insérez le titre de votre lien de menu.
Cliquez sur le bouton "Ajouter au menu", puis déplacez ce nouvel élément pour en faire un élément parent, par glisser/déposer.
Positionnez l'élément parent (dans l'exemple ci-dessus "Clubs") en créant une hiérarchie. Les éléments "Haguenau", "Koenigshoffen" et "Metz" sont des éléments enfants, aussi appelés sous-éléments.
Une fois toutes le modifications terminées, descendez en bas de page et cliquez sur le bouton "Enregistrer le menu".
Surprenant de simplicité n'est ce pas ?
Résultats de cette méthode :
- le lien est non-cliquable et n'affiche aucune adresse URL.
- au survol de l'élément parent du menu, le curseur a l'aspect du pointeur de base. 
En cherchant sur le web j'ai également trouvé une autre alternative, que je considère moins efficace et moins pratique. Je vous la livre tout de même.
Méthode avec code HTML
Suivez exactement les mêmes étapes que pour la méthode précédente. La différence résulte dans le code que l'on va insérer dans le module "Liens".
- dans le champ "Adresse web" : http://#
- dans le champ "Cible du lien" : insérez le titre de votre lien de menu.
Résultats de cette méthode :
- le lien est cliquable mais ne renvoi nul part. Un dièse (#) s'ajoute simplement à la fin de votre adresse URL.
- au survol de l'élément parent du menu, le curseur au a l'aspect de la main, comme s'il s'agissait d'un lien cliquable. 
Besoin d'un expert pour améliorer les performances de votre site internet ?
Contactez-moi pour en discuter ensemble !
Recevez un audit et une estimation gratuite des optimisations à apporter à votre site web.
Bonsoir Thibaut,
Merci pour l’astuce ! 🙂
Mais comment faire quand c’est une catégorie qui est dans le menu, et non une page ?
Est-il possible de faire en sorte que l’on ne puisse pas cliquer sur cette catégorie ?
Merci beaucoup,
Xav
Bonjour Xavier,
la méthode est la même :
1) créer un lien
2) lui donner le même nom que la catégorie désirée.
3) dans le champ « Adresse web », écrire : javascript: return false;
Merci bcp pour l’astuce, ça m’a vraiment aidé 🙂
Merci énormément Thibault pour cet article très utile et merci pour votre aide.
Bonjour,
Cette astuce (avec le javascript) est très intéressante ! Malheureusement cela ne fonctionne pas sur mon site.
Actuellement, j’utilise le http://# pour les liens non cliquables mais, comme évoqué dans votre article, le curseur laisse croire que le lien est cliquable…
Ce problème vient il du fait que ce dernier soit hébergé par wordpress (nomdusite@wordpress.com) ?
Cela peut il venir du thème sur lequel je me base (Nuntius) ?
d’avance merci pour votre aide
Yvain
Bonjour Yvain,
Le Javascript est un langage interprété côté navigateur et non pas côté serveur donc le problème ne peut logiquement pas être du à l’hébergeur.
Avez-vous bien saisi le code sans omettre de caractère ?
Bonjour,
Après une recherche plus approfondie, il s’avère que le thème que j’ai choisi ne semble pas prendre en compte la technique « javascript: return false ».
En changeant de thème, le curseur garde l’aspect du pointeur de base sur les liens modifiés…
Me voilà donc bloqué si je reste sur le thème Nuntius
Yvain
Bonjour Thibault,
ça fonctionne bien pour moi, merci pour cette astuce 😉
Bonjour,
Perso, j’ai un autre problème avec ces liens et ces clics! J’ai créé des liens pour mes sous-menus, ils s’affichent bien sur le site mais il y a un problème pour les ouvrir… Lorsqu’on fait un clic gauche classique il ne se passe rien, par contre si on fait un clic-droit et « ouvrir le lien dans un nouvel onglet », ma page s’affiche bien…
Si vous avez une suggestion, ce sera avec grand plaisir!!!
Merci!
Angie
Bonjour Angie,
Je peux très certainement t’aider. A quelle adresse peut-on voir ton site web ?
Cdlt
Bonjour,
Je suis en train de le développer que sur mon serveur local pour le moment… j’aimerais que ce soit tout clean pour le mettre en ligne! C’est embêtant??
Merci en tout cas!
Oui, sans voir le code je ne pourrai pas t’aider.
Re! Finalement j’ai modifié l’organisation de mon menu et là plus de problème! Je ne sais pas trop pourquoi mais tant mieux! En tout cas merci d’être présent et pour ton blog! 🙂
Dans lien personnalisé vous mettez le texte de la rubrique que vous voulez (non cliquable) à lien vous mettez # ce qui donne l’adresse http://# (ou n’importe quelle autre adresse) vous cliquez sur ajouter au menu. Comme un lien est indiqué WordPress l’ajoutte au menu sans problème. C’est là où réside l’astuce une fois ce lien personnalisé accepté dans le menu vous enlevé complètement http://# (ou l’adresse que vous avez mis) voilà le tour est joué ! Vous avez une magnifique rubrique non cliquable sous laquelle vous pouvez mettre ce que voulez cliquable ou pas. 🙂 🙂
Bonjour,
J’ai un menu avec des sous elements, l’élément parent n’est pas cliquable. Auriez-vous une idée de comment faire pour le rendre cliquable ?
Merci
Bonjour et merci pour du tutoriel !
Il m’a bien fait avancer, j’ai pu résoudre un probleme en grande partie.
Cependant, est il possible qu’en survolant ou cliquant sur l’onglet du menu, le sous menu s’ouvre ?
Car dans mon thème WordPress, le visiteur doit obligatoirement cliquer sur une toute petite flèche minuscule pour ouvrir le sous menu et ce n’est pas du tout pratique.
Voici mon blog pour que tu puisses voir de quoi je parle directement : http://www.naturedesign04.wordpress.com
Merci beaucoup,
Julien
Bonjour Julien,
Heureux de savoir que le tutoriel soit clair et te dépanne !
Si tu souhaites faire apparaître le sous-menu au survol de la souris, il va falloir ajouter un peu de CSS. Je te propose d’ajouter le code suivant :
#menu-item-300 a:hover ul{
display:block;
}
Bonne journée 😉
P.S : j’aime beaucoup la « Déco Cactus » et l’ensemble de vos créations ! C’est très zen et chaleureux.
Bonjour Thibaut et merci pour ce tutoriel.
Tout marche pour moi cependant mon curseur prend une forme édition textuelle et non pas le pointeur de base…
Si tu as une idée de ce qu’il se passe je serais ravis de t’entendre 🙂
Merci à toi
Bonjour 🙂
Je suis très très nulle en codes etc…. Je tente de créer un blog wordpress en cherchant un peu sur les forums les réponses à mes questions mais malheureusement je n’arrive pas du tout à modifier mon menu principal pour en faire un menu déroulant au survol…
Pourriez-vous m’aider s’il vous plait ? Que dois-je vous donner comme indications pour que vous puissiez trouver une solution …?
En vous remerciant par avance.
Merci pour ce partage . Avant de modifier mon menu, le lien était clicable . J ai modifié mon menu et le fait de le rendre non clivable ça peu avoir un impact sur le seo j ai mis cette page en no index …