Menu accordéon

Bonjour, j'ai suivi l'exemple a cette page http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html pour créer un menu en accordéon. Mon problème est que je souhaiterais que les sous menu reste ouvert après le chargement de la page demandé mais que celui-ci ce referme. J'aurais besoin d'un coup de main, merci.

Bonjour inane,

Ce serait bien de lire le tutoriel dans son ensemble :

Le tutoriel a écrit :

Garder un sous-menu ouvert

Lorsque le visiteur clique sur un des "vrais" liens du menu, il est normalement envoyé sur une autre page. Résultat, la page est rechargée, et le sous-menu dans lequel l'utilisateur naviguait n'apparait plus, il a été fermé.

Il est possible de le garder ouvert après un changement de page, mais on va avoir besoin d'intervenir directement sur le code HTML.

Si votre site est statique, il suffit d'ajouter à la main une classe (par exemple "open_at_load") sur le sous-menu que vous voulez garder ouvert (en fonction de la page). Pour les sites dynamiques, il est aussi possible de générer cette classe, en fonction d'une variable $_GET['page'] ou autre.

Dès lors, il suffit de dire au script de fermer tous les sous-menus au chargement, sauf celui qui porte la classe "open_at_load" :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").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", function () { $(this).parent().removeClass("open") } );
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });

} ) ;

</script>

Utiliser la fonction recherche du forum est également une bonne idée, le sujet ayant été traité maintes fois...
Les langages évoluent, les tutoriels vieillissent, il ne serait pas inintéressant de regarder la doc des langages utilisés, et/ou de regarder ce qui se fait ailleurs

C'est bon j'ai résolu mon problème...
Modifié par inane (01 Jan 2013 - 16:44)

Bonjour, j'ai suivi le même tutoriel, le sous menu ca marche super bien, par contre j'ai le même problème que toi! je veux que le menu de la page courante reste ouvert lors du chargement..

Peux tu stp m'aider à le résoudre vu que tu as déjà trouvé la solution ?

NB: je suis débutante