Il existe plusieurs bibliothèques JavaScript si l'on désire créer quelques effets visuels rapidement sur un site. La première avec laquelle j'ai travaillé est Scriptaculous, basée sur Prototype, Joomla travaille quant à lui avec Mootools, et j'ai récemment découvert jQuery qui me parait plus puissant, plus maléable et moins lourd que scriptaculous.

Avec autant de scripts, les pages de ce site ce sont trouvées chargées, beaucoup trop chargées, et il a fallu faire un choix, quitte à travailler un peu.

Mon choix s'est porté sur JQuery. Si la modification des effets visuels créés avec Scriptaculous était simple, c'était une autre paire de manches avec l'intégration pour Joomla et l'excellent plugin fboxbot.

Je vais décrire ici comment créer un menu accordéon avec une petite fonction JavaScript. Il suffit de cliquer sur le menu de gauche pour voir le résultat de ce script, avec évidemment mes propres adaptations CSS. Il existe déjà pour cela le module SBD Accordeon, mais je ne l'ai trouvé ni pratique, ni à mon goût.

Premièrement, ce script fonctionne pour un menu créé avec Joomla, avec des éléments de sous-menus. Les liens "parents" n'auront comme seule tâche d'activer le sous-menu associé, et les autres liens fonctionnent tout à fait normalement.

Il est important que l'intégralité du menu soit chargé pour chaque page, et donc dans les options du module associé aux menus, il faut cocher "Oui" pour "Toujours afficher les sous-menus" :

Ensuite, il faut télécharger jQuery à cette adresse ( en version 1.3.2 au moment où j'écris ces lignes ), le mettre dans le dossier de votre template Joomla, et dans le fichier index.php du template, insérer le lien vers ce script :

<script src="jquery-1.3.2.js" type="text/javascript"></script>

Le script ci-dessous est un script adaté de l'excellent tutoriel Menus Accordéons du site Alsacréations.

Ceci étant, voici le code à insérer dans le fichier index.php du template, ou via un script JavaScript externe :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$(document).ready( function () {
 
    // Cacher les sous-menus : ce sont des blocs enfants des classes "parent" de Joomla
    $(".parent ul").hide(); 
 
    // Si vous voulez que le sous-menu reste ouvert, suite à un clic sur un lien de ce sous-menu,
    // il faut ajouter la ligne suivante :
    $(".active ul").show();
 
    // On associe une nouvelle action au clic sur un lien "parent"
    $("ul.menu li.parent > a").click( function () {
 
  // Si le sous-menu est visible, on le referme en slide
        if ($(this).next("ul:visible").length != 0) {
            $(this).next("ul").slideUp("normal", function () { $(this).parent().removeClass("open") } );
        }
 
  // Sinon on ferme tout ce qui pourrait déjà être ouvert, et on ouvre le menu concerné avec des slide
        else {
            $("ul.menu ul").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul").slideDown("normal", function () { $(this).parent().addClass("open") } );
        }
 
  // On empêche de suivre les liens créant les sous-menus
        return false;
    });
 
} ) ;

Petites variations pour la gestion des événements ou des effets :

• On voit à la ligne 11 que l'action est lancée par un "clic". En remplaçant "click" par "mouseover", le menu se déroule par un survol de souris. Il y a encore d'autres événements possibles, mais pour cela je vous laisse lire un peu la documentation de jQuery.
• L'effet visuel utilisé ici est le "slide". On peut également utiliser l'effet "fade" ( apparition par opacité, mais c'est moins joli dans ce cas que le slide ) en remplaçant slideUp et slideDown respectivement par fadeOut et fadeIn. Encore mieux : on peut définir sa propre animation grâce à animate ( enfin mieux, ça dépend de ce que chacun peut inventer... ).

Par défaut, ce script fonctionne pour des menus ne comprenant qu'un seul niveau de sous-menus, puisqu'étant initialement prévu simplement pour mon site. Une demande a été formulée pour qu'il soit également valable dans le cas d'une hiérarchie multiple. Dans ce cas, il faut modifier la ligne :

$(".active ul").show();

qui s'occupe d'afficher la liste "ul" en cours, par :

$("#current").parents("ul").show(); 

"#current" désigne dans la classe CSS de Joomla le lien vers la page que vous avez devant vos yeux.

Si votre menu comporte plusieurs niveaux de sous-menus, il va falloir montrer ( show() ) la liste "ul" parent de niveau le plus haut, et accessoirement montrer tous les niveaux "ul" supérieurs. La méthode "parents("ul") désigne rapidement tous ces parents de la forme "ul".

En conclusion, cette ligne devrait permettre d'afficher tous les parents de la forme "ul" du lien courant.

Je reste au conditionnel, car cela fonctionne avec le code de test que j'avais. Merci de me faire parvenir vos retours si cela ne devait pas fonctionner chez vous.

Voici le code complet de la variante "multi-niveaux" :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document).ready( function () {
 
    $(".parent ul").hide();
    $("#current").parents("ul").show();
 
    $("ul.menu li.parent > a").click( function () {
 
        if ($(this).next("ul:visible").length != 0) {
            $(this).next("ul").slideUp("normal", function () { $(this).parent().removeClass("open") } );
        }
 
        else {
            $("ul.menu ul").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul").slideDown("normal", function () { $(this).parent().addClass("open") } );
        }
 
        return false;
    });
 
} ) ;

A propos des conflits avec d'autres librairies ( notamment mootools... ) :

Haaaaaa, ce serait bien si tout en informatique pouvait directement fonctionner sans effort. Sauf que c'est rarement le cas.

Joomla utilise la librairie javascript mootools, et il se peut qu'il y ait des conflits, tout simplement parque les deux librairies utilisent les mêmes "raccourcis". Le résultat est simple : le menu ne marche pas.

Pour un script aussi simple que le menu accordéon, il suffit simplement de remplacer chaque dollar ( l'origine du malentendu entre les deux librairies ) par le terme jQuery, ce qui donne :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jQuery(document).ready( function () {
 
    jQuery(".parent ul").hide();
    jQuery(".active ul").show();
 
    jQuery("div.rep").hide();
 
    jQuery("ul.menu li.parent > a").mouseover( function () {
 
        if (jQuery(this).next("ul:visible").length != 0) {
            jQuery(this).next("ul").slideUp("normal", function () { jQuery(this).parent().removeClass("open") } );
        }
 
        else {
            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") } );
        }
 
        return false;
    });
 
} ) ;

Enfin un avis perso : le site officiel de jQuery dont je donne le lien plus haut est très complet, et propose bon nombre de plugins intéressants, mais pour les bases, j'ai préféré lire la documentation la page de developpeur-web2, que je trouve plus lisible.

Au cas où certains d'entre vous aimeraient s'y mettre....