Ajouter un 3eme niveau a un menu vertical.

**orphen** · 31/08/2007, 11h49

Salut a tous pour mon site je suis en train de faire un menu deroulant en javascript.

Il y a deux niveaux sur mon menu j'aimerai en ajouter un autre mais je n'arrive pas a le faire mon menu pete souvent quant je fait mes tests.

Je me tourne donc vers des gens habituer au javascript afin de m'expliquer quelle fonction je devrai rajouter dans le fichier .js et comment appliquer dans mon html le 3eme niveaux.

Mon menu est entierrement positionner par javascript et sa taille est egalement gerer par javascript.

Mon css ne sert que pour la mise en page.

Merci enormement a ceux qui m'expliqueront clairement comment faire.

Fichier javascript.

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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
var vertical = true;
var centrer_menu = false;
var largeur_menu = 95;
var hauteur_menu = 25;
var largeur_sous_menu = 150;
var largeur_auto_ssmenu = true;
var espace_entre_menus = 5;
var top_menu = 2;
var top_ssmenu = top_menu + 28;
var left_menu = 0;
var left_ssmenu = largeur_menu+2;
var delai = 300; // en milliseconde
var marge_en_haut_de_page = top_menu + 40;
var marge_a_gauche_de_la_page = largeur_menu + 10;
var suivre_le_scroll=false;
var cacher_les_select=true;
 
 
var nbmenu = 0; //Auto-calculé
var timeout; 
var agt = navigator.userAgent.toLowerCase();
var isMac = (agt.indexOf('mac') != -1);
var isOpera = (agt.indexOf('opera') != -1);
var IEver = parseInt(agt.substring(agt.indexOf('msie ') + 5));
var isIE = ((agt.indexOf('msie')!=-1 && !isOpera && (agt.indexOf('webtv')==-1)) && !isMac);
var isIE5win = (isIE && IEver >= 5);
var isIE5mac = ((agt.indexOf('msie') != -1) && isMac);
var isSafari = (agt.indexOf('safari') != -1);
 
var reg = new RegExp("px", "g");
 
window.onscroll = function()
{
	if (suivre_le_scroll && (isIE || isIE5mac))
	{
		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="hidden";
		var cumul=0;
		for(i=1;i<=nbmenu;i++)
		{
			var scrollTop = (document.documentElement&&document.documentElement.scrollTop
								?document.documentElement.scrollTop
								:document.body.scrollTop);
			if (!vertical) {
				document.getElementById("menu"+i).style.top = scrollTop + top_menu + "px";
				if (document.getElementById("ssmenu"+i))//undefined
					document.getElementById("ssmenu"+i).style.top = scrollTop + top_ssmenu + "px";
			} else {
				document.getElementById("menu"+i).style.top = scrollTop
							+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
				if (document.getElementById("ssmenu"+i))//undefined
					document.getElementById("ssmenu"+i).style.top = scrollTop
							+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
				cumul += isFinite(hauteur_menu)?hauteur_menu:hauteur_menu[i-1];
			}
		}
		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="visible";
	}
}
 
function preChargement()
{
	if (document.getElementById("conteneurmenu"))
		document.getElementById("conteneurmenu").style.visibility="hidden";
}
 
function Chargement() {
 
	//Compte nbmenu
	nbmenu = 0;
	while (document.getElementById("menu"+(nbmenu+1)))
		nbmenu++;
 
	document.getElementById("conteneurmenu").style.visibility="hidden";
	trimespaces();
	with(document.body.style) {
		if (!vertical) marginTop=marge_en_haut_de_page+"px";
		else		   marginLeft=marge_a_gauche_de_la_page+"px";
	}
 
	positionne();
	CacherMenus();
 
	//pour Safari
	if(isSafari)
		document.getElementById('conteneurmenu').style.fontSize='10px';
 
	document.getElementById("conteneurmenu").style.visibility='';
}
window.onresize = Chargement;
 
 
function positionne() {
 
	var largeur_fenetre;
	if (document.documentElement && document.documentElement.clientWidth) {
		largeur_fenetre = document.documentElement.clientWidth;
	} else if (document.body && document.body.clientWidth) {
		largeur_fenetre = document.body.clientWidth;
	} else if (window.innerWidth) {
		largeur_fenetre = window.innerWidth;
	}
 
	var hauteur_fenetre;
	if (document.documentElement && document.documentElement.clientHeight) {
		hauteur_fenetre = document.documentElement.clientHeight;
	} else if (document.body && document.body.clientHeight) {
		hauteur_fenetre = document.body.clientHeight;
	} else if (window.innerHeight) {
		hauteur_fenetre = window.innerHeight;
	}
 
	if (centrer_menu) {
		if (!vertical) {
			var largeur_totale = espace_entre_menus * (nbmenu-1);
			if (isFinite(largeur_menu))
				largeur_totale += largeur_menu * nbmenu;
			else {
				for (i = 1; i <= nbmenu; i++)
					largeur_totale += largeur_menu[i-1];
			}
			left_menu = (largeur_fenetre - largeur_totale)/2;
		} else {
			var hauteur_totale = espace_entre_menus * (nbmenu-1);
			if (isFinite(hauteur_menu))
				hauteur_totale += hauteur_menu * nbmenu;
			else {
				for (i = 1; i <= nbmenu; i++)
					hauteur_totale += hauteur_menu[i-1];
			}
			top_menu = (hauteur_fenetre - hauteur_totale)/2;
		}
	}
 
	//Menus
	var cumul = 0;
	for(i=1;i<=nbmenu;i++) {
		with(document.getElementById("menu"+i).style) {
			if (!vertical) {
				top=top_menu+"px";
				left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
			} else {
				top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
				left=left_menu+"px";
			}
			if (!suivre_le_scroll || isIE || isIE5mac)
				position="absolute";
			else position="fixed";
			//if (vertical) height=hauteur_menu+"px";
			margin="0";
			zIndex="2";
			if (vertical || isFinite(largeur_menu))
				width=largeur_menu+"px";
			else
				width=largeur_menu[i-1]+"px";
			if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
				cumul += (!vertical?largeur_menu:hauteur_menu);
			}
			else {
				cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
				if (vertical) height=hauteur_menu[i-1]+"px";
			}
		}
	}
 
	//Sous-menus
	cumul = 0;
	for(i=1;i<=nbmenu;i++) {
		if (document.getElementById("ssmenu"+i))//undefined
		{
			with(document.getElementById("ssmenu"+i).style) {
				if (!suivre_le_scroll || isIE || isIE5mac)
					position="absolute";
				else position="fixed";
				if (!vertical) {
					top=top_ssmenu+"px";
					left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
				} else {
					left=left_ssmenu+"px";
					top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
				}
				if (isIE || isOpera || isIE5mac || !largeur_auto_ssmenu) {
					if (isFinite(largeur_sous_menu))
						width = largeur_sous_menu+(largeur_sous_menu!="auto"?"px":"");
					else
						width = largeur_sous_menu[i-1]+(largeur_sous_menu[i-1]!="auto"?"px":"");
				}
				else width = "auto";
				if (!vertical && !isIE5mac) {
					//repositionnement si déborde à droite
					if ((width != "auto")
						&& ((left.replace(reg,'').valueOf()*1 + width.replace(reg,'').valueOf()*1) > largeur_fenetre))
						left = (largeur_fenetre-width.replace(reg,'').valueOf())+"px";
				}
				margin="0";
				zIndex="3";
			}
		}
		if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
			cumul += (!vertical?largeur_menu:hauteur_menu);
		}
		else {
			cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
		}
	}
}
 
function MontrerMenu(strMenu) {
	AnnulerCacher();
	CacherMenus();
	if (document.getElementById(strMenu))//undefined
		with (document.getElementById(strMenu).style)
			visibility="visible";
	SelectVisible("hidden",document.getElementsByTagName('select'));
}
 
function CacherDelai() {
	timeout = setTimeout('CacherMenus()',delai);
}
function AnnulerCacher() {
	if (timeout) {
		clearTimeout(timeout);
	}
}
function CacherMenus() {
	for(i=1;i<=nbmenu;i++) {
		if (document.getElementById("ssmenu"+i))//undefined
			with(document.getElementById("ssmenu"+i).style)
				visibility="hidden";
	}
	SelectVisible("visible",document.getElementsByTagName('select'));
}
 
function trimespaces() {
	//Contourne un bug d'IE5/win... i
	if(isIE5win) {
		for(i=1;i<=nbmenu;i++) {
			if (document.getElementById("ssmenu"+i))//undefined
				with(document.getElementById("ssmenu"+i))
					innerHTML = innerHTML.replace(/<LI>|<\/LI>/g,"");
		}
	}
}
 
function SelectVisible(v,elem) {
	if (cacher_les_select && (isIE||isIE5win))
		for (var i=0;i<elem.length;i++) elem[i].style.visibility=v;
}

Mon fichier 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
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
<html>
<head>
<title>Test du menu</title>
<script language="javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="vertical.css">
</head>
<body>
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">preChargement();</script>
 
	<p id="menu1" class="menu"
		onmouseover="MontrerMenu('ssmenu1');"
		onmouseout="CacherDelai();">
	<a href="#"
		onmouseover="MontrerMenu('ssmenu1');"
		onfocus="MontrerMenu('ssmenu1');">test<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu1" class="ssmenu"
		onmouseover="AnnulerCacher();"
		onmouseout="CacherDelai();"
		onfocus="AnnulerCacher();"
		onblur="CacherDelai();">
	<li>
		<a href="#">test1<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">test2<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">test3<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">test4<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">test5<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">test6<span>&nbsp;;</span></a>
	</li>
	</ul>
<!-- ----------------------------------------- -->
    <p id="menu2" class="menu"
		onmouseout="CacherDelai();"
		onmouseover="MontrerMenu('ssmenu2');">
      <a href="#"
		onfocus="MontrerMenu('ssmenu2');">menu fansyl</a>
    </p>
    <ul id="ssmenu2" class="ssmenu"
		onmouseover="AnnulerCacher();"
		onmouseout="CacherDelai();"
		onfocus="AnnulerCacher();"
		onblur="CacherDelai();">
	<li>
		<a href="#">sylvain<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">fanny<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">fansyl<span>&nbsp;;</span></a>
	</li>
    </ul>
<!-- ------------EXEMPLE MENU-------------- -->
    <p id="menu3" class="menu"
		onmouseover="MontrerMenu('ssmenu3');"
		onmouseout="CacherDelai();">
		<a href="#"
		onfocus="MontrerMenu('ssmenu3');">Images<span>&nbsp;:</span></a>
    </p>
 
	<ul id="ssmenu3" class="ssmenu"
		onmouseover="AnnulerCacher();"
		onmouseout="CacherDelai();"
		onfocus="AnnulerCacher();"
		onblur="CacherDelai();">
	<li>
		<a href="#">image1<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image2<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image3<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image4<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image5<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image6<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image7<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image8<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image9<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image10<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image11<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image12<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image13<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image14<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="#">image15<span>&nbsp;;</span></a>
	</li>
	</ul>
 
</div>
 
<script language="Javascript" type="text/javascript">
			vertical = true;
			Chargement();</script>
</body>
</html>

Et mon 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
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
/***** menu CSS *****/
@media print {
/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
	.menu, .ssmenu {
		visibility:hidden;
	}
}
 
.menu, .ssmenu {
/* Il est important de laisser une largeur, au cas où le Javascript soit désactivé.
margin aussi */
	background-color:#AA8922;
	font-size:12px;
	font-weight:bold;
	border:1px solid #EFB;
	color:white;
	width:150px;
	padding:1px;
	margin:1em;
}
.menu {
	text-align:center;
	background:#789ABC;
	border-color:#004455;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ABCDEF,endColorStr=#789ABC);
}
.ssmenu {
	background:#004455;
	border-color:#ABCDEF;
/* aller pour faire joli sur IE, un petit effet de dégradé !
	Pour voir d'autres effets :
	http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
 
	Par exemple :
	transparence à 25% = opacité à 75%:
		FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=75);
	"Glow" :
		FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ffdead,strength=5);
	Ombre en bas à droite, 5 px :
		FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#ff8c00,strength=5);
	*/
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#789ABC,endColorStr=#004455);
}
 
.menu span, .ssmenu span {
/* pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
	pause dans l'élocution */
	display:none;
}
 
.ssmenu ul, .ssmenu li {
/* Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
	padding:0;
	margin:0;
	list-style-type:none;
}
 
.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
/* Les liens qui ne sont pas sous le curseur.
	Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera...
	La combinaison aucun width et height:100% marche sur tous, donc ne pas toucher */
	font-family:MS Sans Serif, arial, sans-serif, Verdana;
	text-decoration:none;
	color:#FEB;
	padding:2px 1px;
/* Ne pas modifier le block */
	display:block;
/*	Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
	aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */
/*	height:100%;
	margin:0px;*/
	margin:0px;
	width:100%;
	voice-family: "\"}\"";
	voice-family:inherit;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
	width :auto;
}
 
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
/* Les liens sous le curseur.
	On change les couleurs du texte et de fond, et on enlève le soulignement.
	*/
	background-color:#BEF;
	color:#034;
	text-decoration:none;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#2289AA,endColorStr=#ABCDEF);
}

merci encore.