[RESOLU] Menu en accordéon : comment garder le sous-menu ouvert ?

Auteur
Wault	# 10 Mar 2010 - 12:02:05
4 Posts	Bonjour à tous, J'ai suivi le tutoriel à la page : http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html Cela fonctionne assez bien en ce qui concerne le masquage des sous-menus. J'ai meme adapté le code à un second niveau de sous-menu. Cependant, je n'ai pas compris comment faire pour garder le sous-menu ouvert après avoir cliqué sur un des liens fils de ce sous-menus et, donc, après avoir chargé une nouvelle page. Dans l'exemple du tuto, il faudrait que, si je clique sur "Item 2.1", le sous-menu "Item 2" reste ouvert quand la page "Item 2.1" est chargée. Visiblement, cela doit être très simple puisque Thomas D. qui a rédigé le tuto passe très vite sur cette partie. Trop vite pour moi. Je n'ai en particulier, pas compris comment se servir de la classe open_at_load. Concrêtement, pour ce que je veux faire, il me faudrait utiliser une variable de session => 1) Stocker le sous-menu (son Id ?) dans une variable de session lorsque je clique dessus et l'ouvre. 2) Puis récupérer cette valeur de session après avoir cliqué sur un des liens fils. 3) Et réouvrir ce sous-menu une fois la page référencée par le lien fils ouverte, en utilisant la valeur précédemment récupérée. Merci d'avance pour l'aide que vous voudrez m'apporter. De mon coté, je partage le code pour ajouter un second niveau de sous-menus, des fois que cela serve (ou que vous y voyiez d'horribles erreurs ! ) jQuery(document).ready( function () { // On cache les sous-menus : // sauf celui qui porte la classe "open_at_load" : jQuery(".menu 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 : jQuery(".menu li.toggleSubMenu span").each( function () { // On stocke le contenu du span : var TexteSpan = jQuery(this).text(); jQuery(this).replaceWith('<a href="" title="Ouvrir le sous-menu '+TexteSpan+'">' + TexteSpan + '<\/a>'); } ) ; // On modifie l'évènement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubMenu" : jQuery(".menu li.toggleSubMenu > a").click( function () { // Si le sous-menu était déjà ouvert, on le referme : if (jQuery(this).next("ul.subMenu:visible").length != 0) { jQuery(this).next("ul.subMenu").slideUp("fast", function () { $(this).parent().removeClass("open") }); } // Si le sous-menu est caché, on ferme les autres et on l'affiche : else { jQuery(".menu ul.subsubMenu").hide(); jQuery(".menu ul.subMenu").slideUp("fast", function () { $(this).parent().removeClass("open") }); jQuery(this).next("ul.subMenu").slideDown("fast", function () { $(this).parent().addClass("open") }); } // On empêche le navigateur de suivre le lien : return false; }); /* GESTION DU SECOND NIVEAU DANS LE MENU *************************************/ // On cache les sous-sous-menus : jQuery(".menu ul.subsubMenu").hide(); // On modifie l'évènement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubSubMenu" : jQuery(".menu li.toggleSubSubMenu > a").click( function () { // Si le sous-sous-menu était déjà ouvert, on le referme : if (jQuery(this).next("ul.subsubMenu:visible").length != 0) { jQuery(this).next("ul.subsubMenu").slideUp("fast", function () { $(this).parent().removeClass("open") }); } // Si le sous-menu est caché, on ferme les autres et on l'affiche : else { jQuery(".menu ul.subsubMenu").slideUp("fast", function () { $(this).parent().removeClass("open") }); jQuery(this).next("ul.subsubMenu").slideDown("fast", function () { $(this).parent().addClass("open") }); } // On empêche le navigateur de suivre le lien : return false; }); } ) ; Le menu HTML se présente alors ainsi : <ul class="navigation"> <li><a href="#" title="Aller à la page 1">Item 1</a></li> <li class="toggleSubMenu"><span>Item 2</span> <ul class="subMenu"> <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li> <li class="toggleSubSubMenu"><span>Item 2.2</span> <ul class="subsubMenu"> <li><a href="#" title="Aller à la page 2.2.1">sous-sous-menu 2.2.1</a></li> <li><a href="#" title="Aller à la page 2.2.2">sous-sous-menu 2.2.2</a></li> </ul> </li> <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li> </ul> </li> <li class="toggleSubMenu"><span>Item 3</span> <ul class="subMenu"> <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li> <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li> </ul> </li> <li><a href="#" title="Aller à la page 4">Item 4</a></li> </ul> Il faut aussi penser à rajouter les styles pour .menu li.toggleSubSubMenu{}, .menu .subsubMenu{} et .menu ul.subsubMenu a {} Cette méthode pour ajouter un second niveau de sous-menu au tuto de Thomas D. semble fonctionner mais je n'ai bien évidemment pas fait de tests poussés puisque je viens de l'écrire. Modifié par Wault (15 Mar 2010 - 18:02)
4 Posts
Wault	# 11 Mar 2010 - 12:53:51
4 Posts	ReBonjour, J'ai fait une petite recherche et j'ai constaté que la gestion des sessions et/ou des cookies en Jquery était assez compliqué. J'aimerais donc juste comprendre comment faire avec l'exemple du tuto. C'est le paragraphe suivant qui me pose problème : " 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. " Que signifie "ajouter une classe open_at_load à la main" ? Serait-ce l'utilisation d'une fonction javascript qui va vérifier le menu et éditer la ligne ? Merci. Modifié par Wault (11 Mar 2010 - 12:54)
4 Posts
Ivy Bloom	# 14 Mar 2010 - 15:50:53
1 Posts	Bonjour, J'ai exactement le même soucis que Wault concernant la classe open_at_load. Je ne sais pas où la placer dans le code HTML dans la page appelée pour que le sous-menu reste ouvert. Serait-il possible d'avoir le code HTML pour la classe open_at_load ?
1 Posts
Wault	# 14 Mar 2010 - 18:59:42
4 Posts	En fait, je suis parvenu à mes fins. Mais comme ma méthode ne me semble pas propre, je ne l'ai pas postée ici. Il s'agit en fait d'utiliser PHP et Javascript pour partager l'information sur le menu ou sous-menu ouvert, ainsi que les variables $_GET contenant le nom du menu cliqué. Et surtout, il faut partir du principe que lorsque l'on clique pour ouvrir un menu, celui-ci reste ouvert jusqu'à ce que l'on clique sur un autre menu ! => Cela fonctionne bien pour mon usage, mais si sur un autre site, on a par exemple, sur une page appartenant à la section A, un lien vers une page appartenant à la section B, et bien ce sera toujours le menu A qui sera ouvert ! Je ne peux pas vraiment donner de source ici car mon code est adapté à l'utilisation du Zend-Framework et ne ressemble plus vraiment à l'exemple donné dans le tuto. J'essaierai d'adapter mon code à l'exemple du tuto dans la semaine, et venir le poster ici, mais je ne peux rien garantir. Bonne chance Ivy Bloom.
4 Posts
jo_link_noir	# 15 Mar 2010 - 00:45:03
298 Posts	Bonsoir Wault a écrit : Que signifie "ajouter une classe open_at_load à la main" ? Le mettre directement dans le html. Juste comme ça, vous saviez qu'on peut mettre plusieurs classe pour un même élément ? `<div class="classe1 classe2 classeN"></div>` Le open_at_load ce met avec subMenu de la façon suivante : `... <ul class="subMenu open_at_load"> ... </ul> ...` doc jquery, doc javascript, doc php (php.net/la_fonction_chercher)
298 Posts
Heyoan	# 15 Mar 2010 - 00:47:50
Modérateur 8101 Posts	Salut, tu as un exemple dans ce post. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Wault	# 15 Mar 2010 - 09:29:28
4 Posts	Merci beaucoup, Heyoan ! Je me disais bien que quelqu'un devait avoir déjà proposé quelque chose de propre sur le sujet. Et désolé d'avoir créé ce thread en double.
4 Posts
Heyoan	# 15 Mar 2010 - 10:48:02
Modérateur 8101 Posts	Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts