[Total : 7   Moyenne : 4.4/5]

lien parent non cliquable wordpress

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.

menu parent non cliquable WordPress

 

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.

 

hierarchie menu WordPress

 

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.  curseur pointeur

 


 

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.   curseur souris cliquable