Menu déroulant pour wordpress sans widget ou module

Voici un petit tuto pour installer un menu déroulant pour les catégories wordpress sans utiliser autre chose que Jquery et CSS.
Vous pouvez voir un exemple de ce script qui tourne sur le tout nouveau design de notre annuaire gratuit

La problématique de wordpress, c’est que ce cms utilise des class que l’on ne peut pas modifier sans entrer dans le noyaux ou installer un module tiers, et la, on s’embarque souvent dans du code mal fait ou des modules non suivis etc.

J’ai donc cherché une solution simple et rapide à mettre en œuvre.
Je me suis basé sur l’excellent tuto « Créer un menu déroulant “accordéon” avec jQuery » de Thomas D. (tuto sur alsacreations)  pour la réalisation du menu déroulant que j’ai adapté à wordpress. Pour le CSS, je vous laisse vous débrouiller, ce n’est vraiment pas ce qui nous intéresse, ceux qui comprendront la manip, sauront largement coder le reste

Bien entendu, il faut utiliser la bibliothèque jquery. Le menu sera fonctionnel aussi avec JS désactivé (mais il sera déjà déroulé).

Voici le code javascript qui nous intéresse

<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>

Voici le code d’origine généré par wordpress pour la liste des catégories

vous allez vite comprendre ou est le problème.

J’ai volontairement épuré le code afin de mieux visualiser .

<ul class="categories">
	<li class="cat-item"><a href="">ITEM 1</a>
        <ul class='children'>
            <li class="cat-item"><a href="">Sous item</a></li>
            <li class="cat-item"><a href="">Sous item</a></li>
            <li class="cat-item"><a href="">Sous item</a></li>
        </ul>
    </li>
	<li class="cat-item"><a href="">ITEM 1</a>
        <ul class='children'>
            <li class="cat-item"><a href="">Sous item</a></li>
        </ul>
    </li>
    <li class="cat-item"><a href="">ITEM 2</a></li>
</ul>

On constate assez facilement que l’on va avoir un problème avec les class hérités de l’ul children: cat-item est présent dans l’ul parent et enfant. Il faudrait donc 2 class différentes si l’on veut suivre le tuto d’alsacreations.

Passons à l’adaptation…

WordPress ne génère pas de <span>, donc, déjà, on peut supprimer cette partie du script, puis on adapte les différentes class.
On adapte ensuite le nom des class à celles du cms.

On remplace donc :

• .navigation par .categories
• .subMenu par .children
• .toggleSubMenu par .cat-item

Comme wordpress affiche des catégories et sous-catégories cliquables on va donc modifier le comportement, au lieu d’utiliser la fonction click on va utiliser mouseover.

Voici le résultat de la première étape :

<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".categories ul.children").hide();

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "children" :
$(".categories li.cat-item > a").mouseover( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".categories ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>

Et la, c’est le drame !

Le menu se replie des que l’on passe au dessus d’un lien contenu dans le sous menu, rappelez vous, tous les li ont la même class (.cat-item) et c’est sur celle ci que le js se base. Donc, on va tout simplement renommer à la volé la class cat-item en cat-item_under des sous-catégorie dès que la page est chargée et on aura notre joli menu déroulant pour les catégories wordpress sans même toucher au php ou installer un plugin. Il ne vous restera ensuite qu’a adapter votre css comme vous le souhaitez.

Voici le script pour le menu déroulant wordpress

<script type="text/javascript">
<!--
$(document).ready( function () {
 // On cache les sous-menus :
 $(".categories ul.children").hide();
 //On modifie la class du sous menu pour conserver le mouseover lors du survole de sous-cat
 $(".categories ul.children li").addClass("cat-item_under").removeClass("cat-item");

 //on applique l'action mouseover
 $(".categories li.cat-item > a").mouseover( function () {
 // Si le sous-menu était déjà ouvert, on le referme :
 if ($(this).next("ul.children:visible").length != 0) {
 $(this).next("ul.children").slideUp("normal");
 }
 // Si le sous-menu est caché, on ferme les autres et on l'affiche :
 else {
 $(".categories ul.children").slideUp("normal");
 $(this).next("ul.children").slideDown("normal");
 }
 // On empêche le navigateur de suivre le lien :
 return false;
 });
} ) ;
// -->
</script>

J’espère avoir permis à certaines personnes de ne pas bloquer sur la création d’un menu déroulant wordpress avec jquery
Et surtout, d’éviter d’utiliser des plugins pour rien !