11548 sujets

JavaScript, DOM et API Web HTML5

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

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. Smiley decu
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. Smiley jap





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 ! Smiley biggol )

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)
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é. Smiley sweatdrop


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)
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 ?
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. Smiley ohwell

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 ! Smiley ohwell

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. Smiley decu

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. Smiley smile
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>
...
Merci beaucoup, Heyoan ! Smiley jap
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. Smiley decu
Sujet clos
Aller à