Menu 3 niveaux avec Collapsor
Bonjour !
Je me tourne vers vous car j'essaye désespérément de coder un menu déroulant sur trois niveaux. N'y connaissant pas grand chose en Jquery et autre JS, j'essaye tant bien que mal d'associer des morceaux de code.
Là j'en suis à l'affichage du menu qui fonctionne de manière basique. Il coulisse et se ferme. Mon problème c'est que je n'arrive pas à intégrer la classe "open_at_load" pour le laisser ouvert sur certaines pages de mon site.
J'ai tenté de combiner :
- le menu exemple du plug-in Collapsor
Je ne trouve pas la solution et sur internet les forums qui parlent de Collapsor sont plutôt rare.
Si quelqu'un pouvait me sortir de ce mauvais pas ce serait génial.
Merci de votre aide !
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="/collapsor/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/collapsor/jquery.collapsor.js" type="text/javascript"></script>
<style type="text/css">
#navigation {
margin: 0;
padding: 0;
list-style: none:
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation a, #navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu 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 {
text-decoration: underline;
}
#navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
</style>
<script type="text/javascript">
$(function(){
$('ul a').collapsor();
$('dl strong').collapsor({sublevelElement:'dl', speed: 1000});
});
</script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.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 :
$("li.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" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script>
</head>
<body>
<ul id="navigation">
<li class="toggleSubMenu">
<a href="#menu_1">Menu 1</a>
<ul>
<li>
<a href="#menu_1_1">Menu 1-1</a>
</li>
<li>
<a href="#menu_1_2">Menu 1-2</a>
<ul>
<li>
<a href="#menu_1_2_1">Menu 1-2-1</a>
</li>
<li>
<a href="#menu_1_2_2">Menu 1-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#menu_2">Menu 2</a>
</li>
<li>
<a href="#menu_3">Menu 3</a>
</li>
</ul>
</body>
</html> |
