Menu déroulant en JS

Bonjourrrrrrrrrrrrr,

J'ai un menu déroulant (3 niveaux), et lorsque je clique sur le 3 ème niveau,
une autre page s'ouvre (qui contient aussi ce même menu) et un résultat s'affiche (par rapport à ce qu'on a cliqué).

=> Mon menu s'enroule, ce qui est logique car la page se recharge mais moi je voudrais que mon menu reste déroulé...

Je ne vois pas du tout comment faire, quelqu'un pourrait peut-être m'aider ??
:calim2:

Merci pour votre aide précieuse :)

Salut,

Citation:

Je ne vois pas du tout comment faire

On ne voit pas aussi comment le faire sans le code concerné.

il faut passer par des cookies OU , passer par l'url pour passer un paramètre qui indiquera quel menu doit être ouvert

Merci pour vos réponses c'est très très très gentil :)

J'avais pensé aux cookies mais je ne sais pas du tout comment faire... :oops:
Par contre l'url, c'est une bonne idée...

Le code:
HTML

Code:

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
<div id="Menu">     
<div style="position: static;" class="toggleSubMenu"><a href=""  title="">
	<img src="images/menu/menu_af.gif" id="af5"  border="0"  /></a> 
	<div style="display: none;" class="subMenu"> 
		<div style="position: static;" class="toggleSubMenu2"><a href="" title="" class="sub2">
			<img src="images/menu/menu_a1.gif" id="a" border="0" /></a> 
			  <div style="display: none;" class="subMenu2"> 
				  <a href="cat.aspx?id=1&tv=2" "title=""><img src="ImageTest/Nor1.png" runat="server" id="MenuD" border="0"  /></a>
				  <a href="cat.aspx?id=2" title=""><img src="ImageTest/Nor2.png"  border="0" /></a>
			  </div> 
		</div> 
		<div style="position: static;" class="toggleSubMenu2"><a href="" title="" class="sub2">
			<img src="images/menu/menu_a2.gif" id="b"  border="0" /></a> 
			  <div style="display: none;" class="subMenu2"> 
				  <a href="cat.aspx" title=""><img src="ImageTest/Nor6.png" border="0" /></a>
			  </div> 
		</div> 
		<div style="position: static;" class="toggleSubMenu2"><a href="" title="" class="sub2">
			<img src="images/menu/menu_a3.gif" id="k" border="0" /></a> 
			  <div style="display: none;" class="subMenu2"> 
				  <a href="cat.aspx" title=""><img src="ImageTest/Nor4.png" border="0" /></a>
			  </div> 
		</div> 
	</div> 
</div> 
</div>

JS

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready( function () {
	// On cache les sous-menus
	// sauf celui qui porte la classe "open_at_load" :
	$("div.subMenu:not('.open_at_load')").hide();
	// On selectionne tous les items de liste portant la classe "toggleSubMenu"
 
	// et on remplace l'element span qu'ils contiennent par un lien :
	$("div.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'evenement "click" sur les liens dans les items de liste
	// qui portent la classe "toggleSubMenu" :
	$("div.toggleSubMenu > a").click( function () {
		// Si le sous-menu etait deja ouvert, on le referme :
		if ($(this).next("div.subMenu:visible").length != 0) {
			$(this).next("div.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
		}
		// Si le sous-menu est cache, on ferme les autres et on l'affiche :
		else {
			$("div.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
			$("div.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
			$(this).next("div.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
		}
		// On empêche le navigateur de suivre le lien :
		return false;
	});
	 $("div.toggleSubMenu2 > a").click( function () {
		// Si le sous-menu etait deja ouvert, on le referme :
		if ($(this).next("div.subMenu2:visible").length != 0) {
			$(this).next("div.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
		}
		// Si le sous-menu est cache, on ferme les autres et on l'affiche :
		else {
			$("div.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
			$(this).next("div.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
		}
		// On empêche le navigateur de suivre le lien :
		return false;
	});
 } ) ;

CSS

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#navigation {
	margin: 0;
	padding: 0;
	color: #fff;
	width: 300px;
	font: 1.2em "Verdana", sans-serif;
	}
#navigation a, #navigation span {
	display: block;
	color: #fff;
	text-decoration: none;
	}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
	background-image: url(menu-item-deroule.png);
	}
#navigation .toggleSubMenu2 {
	background-image: url(menu-item-deroule.png);			
	margin-left: 0px;
	text-decoration:none;
	}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu2 span {
	background-image: url(menu-item-deroule.png);
	}
#navigation .open a, #navigation .open span {
	background-image: url(menu-item-enroule.png);
	}
#navigation a:hover, #navigation a:focus, #navigation a:active {
	}
#navigation .subMenu {
	font-size: .8em;
	font-size: .9em;
	margin: 0;
	padding: 0;
	}
#navigation ul.subMenu a {
	background: none;
	padding-left: 7px;
	}
#navigation .subMenu2 {
	font-size: .8em;
	font-size: .9em;
	margin-left: 0px;
	padding: 0;
	} 
#navigation .sub2 {
	background-image: url(menu-item-deroule.png);
}

Quelqu'un pourrait me donner une piste pour l'url...?

Je ne vois pas ce qui permet au menu de rester déroulé...:?

Si tu simules le click quand le document est chargé.

j'ai pas compris.... :oops: