informatclic

L’informatique par Informatclic

Découvrez l’univers d’Informatclic au travers de ses divers articles. Vous trouverez de l’informatique, bien entendu, mais aussi un éventail d’astuces en tout genre, sur du software, du hardware et bien évidemment sur internet et le webdesign

Menu déroulant pour wordpress sans widget ou module

Publié le 19 mai 2010 par Djolhan

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 !

27 commentaires pour ce billet

Si votre commentaire est de qualité, vous ne serez pas modéré et le Si votre commentaire est de qualité, il ne sera pas modéré sera assuré :)

Le 14 juin 2010 à 10 h 10 min par guillaume du site depannageinformatique

bonjour,
Ok pour le code et ca semble plutot joli.
Mais possible d’avoir un plugin directement, car ayant plusieurs site wordpress, cela m’aiderait bien et éviterait de devoir réécrir le code à chaque fois

Le 18 juin 2010 à 13 h 47 min par Djolhan (author)

Justement, il n’y a pas besoin de plugin. Suffit d’utiliser le javascript dans le header. C’est la tout l’intérêt de l’article.

Le 24 juin 2010 à 13 h 51 min par Animations Produit

Bonjour,le code est très interessant.Merci

Le 23 septembre 2010 à 16 h 38 min par Spo

Hum nice, merci de l’adaptation je cherchais à la aussi! Ça me fera ça de gagné.

Le 29 septembre 2010 à 15 h 28 min par Anonyme

Sympa le tutorial, le résultat est à la fois joli et pratique. Intéressant aussi de voir pour une fois qu’écrire un code est plus pratique qu’installer un plugin.

Le 30 septembre 2010 à 15 h 04 min par Anonyme

J’ai essayé et j’en suis content du résultat. Mais je préfère de loin installer un plugin s’il y en a que de faire ça.

Le 4 octobre 2010 à 9 h 55 min par Djolhan (author)

Quand je vois la qualité des « plugins » à installer et le ralentissement des wordpress, je préfère de loin modifier mon thème plutôt que d’en installer un, mais c’est votre choix ;)

Le 22 décembre 2010 à 21 h 05 min par osaunier

Bonjour, j’essaye d’intégrer ce code dans mon sidebar.php seulement rien ne se passse, je en comprends pas. Peut-^tre est-ce lié à la version 3.0.3 de wordpress? Toujours est-il que si quelqu’un l’a intégré sur un wordpress 3.0.3 je suis preneur. Merci d’avance

Le 22 décembre 2010 à 21 h 31 min par Djolhan (author)

Bonsoir, il s’agit bel et bien d’un wordpress 3.0.3. Ce menu est compatible avec le systeme wordpress, avez vous bien pensé à mettre jquery ?

Le 22 décembre 2010 à 23 h 32 min par osaunier

Bonsoir, oui pourtant j’ai bien jquery qui est pointé et chargé :
, je ne comprends pas pourquoi je n’ai rien qui se manifeste je vais voir en l’intégrant ailleurs. Merci pour votre aide.

Le 28 décembre 2010 à 11 h 48 min par osaunier

Bonjour,

Je continue à creuser :) En fait je pense que cela fonctionne mais que je me plante sur la mise en oeuvre. Pour être sûr… je copie colle ce script dans mon header.php ensuite je prends l’arbo ul /ul et je la colle dans mon sidebar.php, cependant… rien… est-ce que des plugins pourraient perturber ce fonctionnement? Merci pour votre aide.

Le 28 décembre 2010 à 19 h 13 min par Djolhan (author)

C’est possible qu’un autre plugin face appel aux mêmes fonction…

Le 27 janvier 2011 à 4 h 40 min par vieurou

pareil, j’ai l’impression que le script ne se lance pas ,
Je l’ai adapter pour les menu de page mais rien .
Lorsque je regarde mes sources , mes menu-item qui sont dans des sub-menu de sub-menu, ils n’ont pas étaient renommés en menu-item_under…
Zarbi…
si quelqu’un a une solution

Le 27 janvier 2011 à 10 h 08 min par Djolhan (author)

Avez vous modifié la class de votre catégorie ? Cela peut etre à l’origine d’un dysfonctionnement.

Le 8 mars 2011 à 15 h 30 min par Jeremy

Bonjour,

Cet article correspond exactement à ce que je souhaite faire.

Mais je n’y arrive pas, j’ai pourtant cherché aussi sur d’autre site,

Pouvez-vous m’aider ? Est-ce que j’aurai oublié une étape, qui ne figurerait pas dans l’article ?

Chargement un fichier JS ?
Ou autre ?

Merci d’avance pour votre aide =)

Le 8 mars 2011 à 16 h 34 min par Djolhan (author)

Avez-vous regardé au niveau de la feuille de style ?

Le 8 mars 2011 à 22 h 35 min par Jeremy

Hey, merci pour votre réponse rapide.

J’ai finalement réussi à trouver mon problème, cela venait surement de deux problèmes : mauvaise class et je ne chargais pas de fichier JS au début du code.

Il ne reste plus qu’à adapter le css à mon site =)

Le 8 mars 2011 à 22 h 58 min par Djolhan (author)

Allez, le plus dur est déjà fait ;)
Je veux bien voir le site ^^

Le 27 avril 2011 à 20 h 28 min par System7

Bonsoir,

Débutant sur WordPress, j’ai télécharger Jquery, un fichier nommé jquery-1.5.2.js et je l’ai placé dans le dossier de mon thème wordpress ;

Je souhaite réaliser ce menu déroulant, mais je ne sais pas où dois-je mettre le bout de javascript de ce tutoriel… Faut-il créer un nouveau fichier javascript ?

Par ailleurs, est-ce qu’il faut appeler le javascript en question depuis mon fichier sidebar.php ?

Enfin je souhaitais savoir s’il est possible de réaliser ce menu en l’adaptant aux pages wordpress, et non aux catégories.

Désolé pour l’avalanche de question,
merci par avance !

Le 18 mai 2011 à 9 h 36 min par Djolhan (author)

Bonjour,
Le JS doit être dans votre header tout simplement. Pour le reste, il suffit d’adapter en fonction des balises css de votre menu page.

Le 8 août 2011 à 13 h 29 min par olivier

Bonjour, votre code fonctionne très bien…, mais pas si le menu à plus de deux niveaux :

cat1_niv0 <= se replie bien
cat11_niv1
cat12_niv1
cat121_niv1 <= n'apparait pas au survol de cat12_niv1
cat122_niv1 <= n'apparait pas au survol de cat12_niv1
cat2_niv0 <= se replie bien
cat21_niv1

Je pense qu'il s'agit de modifier légèrement le script mais je ne connais pas bien jquery

Le 8 août 2011 à 13 h 31 min par Djolhan (author)

Effectivement, il est conçu seulement pour 1 niveau. Le script serait bien plus complexe sinon ;)

Le 8 août 2011 à 13 h 37 min par olivier

Dans la mesure où bon nombre de structures peuvent avoir plus d’un niveau, ce script est certes intéressant car effectivement très léger, mais trop limité dans sa portée. Dommage. :(

Si quelqu’un avec des connaissances jquery suffisantes pouvait « généraliser » ce script, ça serait bien.

Le 21 août 2011 à 1 h 08 min par Bert

Olivier, j’ai une excellente nouvelle pour toi, le plugin qui suit devrait répondre à tes besoins : http://wordpress.org/extend/plugins/jquery-categories-list/

;)

Le 21 août 2011 à 18 h 45 min par Bert

Mise à jour : J’ai trouvé un plugin encore plus abouti que celui que je te proposais dans mon commentaire précédent : http://wordpress.org/extend/plugins/collapsing-categories/

Enjoy ;)

Le 22 août 2011 à 9 h 41 min par olivier

Merci Bert,
Je vais garder ces liens et voir s’il peuvent me convenir éventuellement, mais l’intérêt de ce post était qu’il proposait un menu déroulant SANS plugin. Je n’ai rien contre les plugins, au contraire, mais là c’était la légèreté du code.

Le 12 septembre 2011 à 8 h 24 min par njaka

Merci Bert, le code marche super bien. Mais comment on fait pour que les lien du menu parent soit actif.

Votre avis nous interesse, alors, n'hésitez pas à commenter.

Entrez votrepseudo@votremotclef dans le champ nom pour obtenir un lien SEO vers votre site tout en conservant votre pseudo.
Les mots clef à la place du pseudo ne seront plus acceptés.

Ce blog utilise Gravatar. vous pouvez afficher votre avatar en vous enregistrant sur Gravatar.

Laissez un commentaire ou un trackback depuis votre site.
Vous pouvez aussi suivre les commentaires via RSS.

Copyright © 2012 Informatclic | Blog propulsé par WordPress integration et theme réalisé par l'Agence web hdclic | Articles (RSS) et Commentaires (RSS)