Transformer les menus de Joomla! en menus en accordéon

J'ai longtemps cherché un plugin ou un module pour Joomla! me permettant d'avoir des menus en accordéon pour ce site mais ai toujours été insatisfait du résultat. L'extension la plus satisfaisant (en tout cas pour moi) est le module Accordion Menu proposé par James Frank et Lalan Kumar et disponible sur JoomlaCode.

Au moment où je réalisais mon premier template (voir ici), j'ai découvert un script (sous licence Creative Commons by-nc-sa) utilisant la librairie JavaScript jQuery proposé par Arnaud Kientz sur son site mais que j'ai été amené à modifier très légèrement pour le faire correspondre à mes besoins.

Script initial

Je me propose ici de ne faire que recopier le script final proposé par Arnaud Kientz (ici je vous le rappelle) afin de savoir de quoi il est question pour la suite. Voici donc le script :

jQuery(document).ready( function () {
 
 jQuery(".parent ul").hide();
 
 jQuery(".active ul").show();
 
 jQuery("ul.menu li.parent > a").click( function () {
 
 
 if (!jQuery(this).parent().hasClass("open")) {
 jQuery("ul.menu li ul").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
 jQuery(this).next("ul").slideDown("normal", function () { jQuery(this).parent().addClass("open") } );}
 
 else {jQuery(this).next("ul").slideUp("normal", function () { jQuery(this).removeClass("open") });}
 
 return false;
 });
 
} ) ;

Problèmes rencontrés et modifications

Le premier problème que j'ai repéré survient lorsque l'on clique sur un élément parent que l'on a déjà déplié et replié : en effet, au troisième clic (le premier pour déplier le menu, le second pour le replier), rien ne se passe alors que le menu devrait se déplier à nouveau. Il s'avère en fait que la classe open que le script attribue au menu déplié n'est pas retirée lorsque l'on clique sur le même menu pour le replier (pas de problème lorsque l'on clique sur un autre menu parent).

J'ai modifié ce comportement en modifiant la ligne 14 de la sorte :

else {jQuery(this).next("ul").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });}

Le second problème survient lorsque l'on rafraîchit la page ou que l'on clique sur un des éléments du menu ouvert et donc que l'on charge une nouvelle page ; en effet, dans ces cas-là, le menu contenant l'élément correspondant à la page que l'on affiche est bien déplié (grâce à la cinquième ligne du script initial) mais l'élément parent ne présente plus la classe open, ce qui est problématique si l'on souhaite replier ce menu ou lorsque l'on désire « marquer » le menu déplié en utilisant des propriétés CSS appliquées à l'élément possédant la classe open.

Pour corriger ce problème, il m'a suffi d'ajouter au script initial la ligne suivante (je l'ai placée juste après la cinquième ligne) :

jQuery(".active").addClass("open");

Utilisation - Mise en œuvre

Ce script utilisant la librairie JavaScript jQuery, il faut tout d'abord charger cette librairie. Plutôt que de l'appeler « à la main » comme le préconise Arnaud Kientz, je vous recommande plutôt d'utiliser le plugin SC jQuery de Phil Snell ou le plugin jQuery++ Integrator de Semyon Tushev.

Une fois ce plugin installé, il vous faut modifier la section head du fichier index.php du template que vous utilisez en y ajoutant ceci :

<script type="text/javascript">
//Script Accordion Menu by Brice Boucard : http://briceboucard.fr
//Licence : CC by-nc-sa
//based on Arnaud Kientz's work : http://unpeud.info/a-propos-du-site/joomla-menu-accordeon-avec-jquery
 
jQuery(document).ready( function () {
 jQuery(".parent ul").hide();
 jQuery(".active ul").show();
 jQuery(".active").addClass("open");
 
 jQuery("ul.menu li.parent > a").click( function () {
 
 if (!jQuery(this).parent().hasClass("open")) {
 jQuery("ul.menu li ul").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
 jQuery(this).next("ul").slideDown("normal", function () { jQuery(this).parent().addClass("open") } );}
 
 else {jQuery(this).next("ul").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });}
 return false;
 });
} ) ;
</script>

Enfin, dans la Gestion des modules, vérifiez que tous vos menus (mod_mainmenu) sont correctement configurés, plus précisément que les sous-menus sont toujours affichés (option « Toujours afficher les sous-menus ») comme sur la capture d'écran ci-contre.

Sous Joomla! 1.6 (ou 1.7) avec le template Beez 2, l'intitulé de la configuration n'est pas tout à fait le même. Il faut cocher le bouton-radio « Oui » pour « Afficher tous les liens » comme sur la seconde capture. De plus, avec ce template, la configuration du CSS pour styler les menus n'est pas si aisée que cela.

J'ai, suite à une modification de la hiérarchie des contenus et donc de la structure des menus, été amené à reprendre ce script pour le rendre fonctionnel avec des menus à trois niveaux.

Vous pouvez également récupérer ce script dans mon dépôt consacré à Joomla! sur GitHub.