JS: ne pas enroulé un menu déroulant lors de l'affichage du résultat.
Bonjour,
J'ai un menu vertical déroulant à 3 niveaux.
Lorsque je clique sur le dernier niveaux, j'affiche un résultat (sur la même page).
Jusque là, ça fonctionne...
Mais j'aimerais que lorsque mon résultat est affiché, le menu ne s'enroule pas...
Le problème c'est que la page se re-charge donc ça me paraît logique que le menu s'enroule.
Comment je pourrais faire pour que la page garde en mémoire le dernier sous-menu cliqué??
ex:
Marque
> ss-marque
. ss-ss-marque
résultat: blablabla
Voici mon code:
partie HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id="navigation">
<div style="position: static;" class="toggleSubMenu"><a href="" title="Afficher le sous-menu">
<img src="Image/Afr.png" /></a>
<div style="display: none;" class="subMenu">
<div style="position: static;" class="toggleSubMenu2"><a href="" title="Afficher le sous-menu" class="sub2" >
<img src="Image/AfrDS.png" /></a>
<div style="display: none;" class="subMenu2">
<a href="Default.aspx?id=1" title=""><img src="Image/Isl.png1" /></a>
<a href="Default.aspx?id=2" title=""><img src="Image/Isl.png2" /></a>
<a href="Default.aspx?id=3" title=""><img src="Image/Isl.png3" /></a>
</div>
</div>
</div>
</div>
</div> |
partie 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
44
45
46
47
48
|
<script type="text/javascript">
<!--
$(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;
});
} ) ;
// -->
</script> |
partie 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
48
49
50
51
|
<style type="text/css">
#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: 7px;
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: 4px;
padding: 0;
}
#navigation .sub2 {
background-image: url(menu-item-deroule.png);
}
</style> |
