Menu déroulant en JS

**hbhhhbhh** · 27/05/2009, 23h21

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 ??

Merci pour votre aide précieuse

**andry.aime** · 28/05/2009, 07h25

Salut,

Je ne vois pas du tout comment faire

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

**le_chomeur** · 28/05/2009, 09h26

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

**hbhhhbhh** · 28/05/2009, 10h18

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

Par contre l'url, c'est une bonne idée...

Le code:
HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}