Position d'un bloc par rapport au bord gauche de la fenêtre

Version imprimable

22/08/2007, 15h05
Lindorie

Position d'un bloc par rapport au bord gauche de la fenêtre
Bonjour,

Etant débutante en javascript, j'ai quelques petits problèmes...
En effet je souhaiterais positionner un menu (définit en position: absolute) en fonction de la position d'un bloc qui lui n'est pas en position absolute...
D'après mes recherches sur internet je crois comprendre qu'il faut utiliser offsetLeft pour avoir l'abscisse du bloc en pixel, mais je n'arrive pas à l'utiliser !!

j'ai bien essayé ça mais ça marche pas du tout.
Code:

1 2 3 4 5 var position_left = document.getElementById("corps").offsetLeft; /* Position gauche du menu, en px. */ var left_menu = position_left + 20;
22/08/2007, 15h58
Tober

tu peux préciser ce qu'est left_menu ?
si c'est la position gauche de ton menu, tu peux faire après ca :

Code:

document.getElementById("corps").style.left = left_menu
22/08/2007, 17h08
Lindorie

left_menu est bien la position gauche du menu, en fait je modifie un script déjà existant...

Ce que tu me dis ça va modifier la position de l'élément "corps", non ? Cet élément est centré en css et c'est pas celui là que je veux modifier.
Je voudrais que le menu soit placé 20 px plus à droite de cet élément (le truc compliqué c'est que l'élément est positionné automatiquement et n'a pas de positionnement par rapport au bord gauche de la fenetre défini...)
22/08/2007, 19h59
Tober

ouais j'ai confondu :

Code:

document.getElementById("menu").style.left = left_menu

essaye voir ça....
22/08/2007, 21h04
Lindorie

Non ça fait rien de plus qu'avant, le menu bug et c'est tout. Mais j'ai l'impression que

Code:

document.getElementById("corps").offsetLeft;

ne renvoie pas de valeur (j'ai essayé de tester avec alert() pour voir ce que ça affichait mais y'avait rien):roll:
22/08/2007, 23h37
Bisûnûrs

Essaie de mettre en plus un position:relative sur le bloc parent dont tu veux que le position:absolute se réfère.
23/08/2007, 11h57
Lindorie
J'ai rajouté un position: relative sur le bloc "corps" mais ça a rien donné. Lescript js se bloque à partir de là...
Code:

1 2 3 4 var position_left = document.getElementById("corps").offsetLeft; var left_menu = position_left +20;
23/08/2007, 12h09
Bisûnûrs

A quel moment lances-tu ta fonction ? N'essaies-tu pas d'exécuter ces lignes de codes alors que tes éléments ne sont pas encore instanciés dans la page ?

Au passage :

Code:

document.getElementById("menu").style.left = left_menu + "px";

et non pas :

Code:

document.getElementById("menu").style.left = left_menu

Ce n'est pas une fonction, c'est une page externe de script que j'appelle au début de la page principale...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
 
	<head>
		[...]
 
		<script language="javascript" src="menu02.js"></script>
 
                [...]
 
                </div> <!-- fin ConteneurMenu -->
 
		<div id="corps">
 
                [...]
 
		</div> <!-- fin Corps -->
 
		<script language="javascript">
			var nbmenu=8;
			Chargement();
		</script>

Niveau js j'ai toujours ça :

Code:

1
2
3
4
5
6
 
var position_left = document.getElementById("corps").offsetLeft;
/* Position gauche du menu, en px. */
var left_menu = position_left +20;
 
document.getElementById("conteneurmenu").style.left = left_menu + "px";

et plus loin ça :

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
 
 
function positionne() {
	var largeur_fenetre = (isIE?document.body.clientWidth:window.innerWidth);
	var hauteur_fenetre = (isIE?document.body.clientHeight: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;
		}
	}
 
var cumul = 0;
	for(i=1;i<=nbmenu;i++) {
		with(document.getElementById("menu"+i).style) {
			if (!vertical) {
				top=top_menu+"px";
				//left=(((i-1)*(largeur_menu+espace_entre_menus))+1+left_menu)+"px";
				left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
			} else {
				//top=(((i-1)*(hauteur_menu+espace_entre_menus))+1+top_menu)+"px";
				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";
			}
		}
	}

23/08/2007, 19h02
Bisûnûrs

Donc au moment où tu appelles tes éléments par getElementById(), ils ne sont pas encore créés dans la page HTML. Il faut que tu mettes la récupération des valeurs dans une fonction que tu appelles sur le onload de la balise body.

J'ai essayé ce que tu dis, mais j'ai du mal avec les fonctions... j'ai essayé ça :
Code:

1 2 3 4 5 6 7 8 function position() { var position_left = document.getElementById("corps").offsetLeft; document.getElementById("conteneurmenu").style.left = left_menu + "px"; } var left_menu = position_left +20;
Code:

<body onload="position()">

Sauf que c'est pareil, rien qui change.

Y'a un truc de bizarre dans ce que tu dis, parce que dans la suite du fichier js externe, y'a plein de fois ou les éléments sont appelés par getElementById() donc théoriquement ça devrait pas marcher non plus...

Ton code est un peu le foutoir ...

Dans ton dernier message, tu déclares une variable position_left dans la fonction position(), donc tu ne peux pas t'en servir dehors pour faire :

Code:

var left_menu = position_left +20;

En plus, tu affectes la valeur left_menu après vouloir l'utiliser.

:arrow:
Code:

1 2 3 4 5 function position(){ var position_left = document.getElementById("corps").offsetLeft; var left_menu = position_left + 20; document.getElementById("conteneurmenu").style.left = left_menu + "px"; }
Ou si tu veux utiliser position_left et left_menu dans une autre fonction :
Code:

1 2 3 4 5 6 7 8 var position_left; var left_menu; function position(){ position_left = document.getElementById("corps").offsetLeft; left_menu = position_left + 20; document.getElementById("conteneurmenu").style.left = left_menu + "px"; }

Merci ! Maintenant le script s'exécute correctement sauf que j'ai toujours pas ce que je voulais : le menu est maintenant collé au bord gauche du bloc "corps" et même si je change cette partie du code (le 20), le menu bouge pas... :

Code:

left_menu = position_left + 20;

En fait si je mets pas de valeur dans la valeur left_menu en dehors de la fonction, le menu se positionne plus comme il faut..

Parce que la variable left_menu est réutilisée ici :

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
 
//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)*(largeur_menu+espace_entre_menus))+1+left_menu)+"px";
				left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
			} else {
				//top=(((i-1)*(hauteur_menu+espace_entre_menus))+1+top_menu)+"px";
				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";
			}
		}
	}

23/08/2007, 23h47
Bisûnûrs

Ca te dirait pas de nous montrer ton code en entier ? Parce que morceaux par morceaux, on n'y arrivera jamais ...

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
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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
/* iubito's menu - http://iubito.free.fr/prog/menu.php - configuration du javascript */
 
 
/* true = le menu sera vertical, à gauche.
   false = le menu sera horizontal, en haut. */
var vertical = true;
 
/* TRES IMPORTANT !
	Il faut mettre ici le nombre de menus, le script n'est pas capable de compter tout
	seul ! :-p Donc si votre code va jusqu'à <p id="menu5"...> il faut mettre 5. */
var nbmenu = 3;
 
 
 
/* Centrer le menu ? (true/false).
	Centre horizontalement ou verticalement suivant le mode choisi. */
var centrer_menu = false;
 
/* On est obligé de définir une largeur pour les menus.
	Pour mettre des menus de largeurs différentes :
	var largeur_menu = new Array(largeur menu1, largeur menu2, largeur menu3...)
	Il faut faire attention à mettre autant de valeurs que de nombre de menu !
	Attention, si vous êtes en menu vertical, mettez une largeur fixe (pas de Array) !
	*/
var largeur_menu = 123;
 
/* En mode vertical, on a besoin de connaître la hauteur de chaque menu.
	Même si les "cases" ne sont pas dimensionnées en hauteur.
	Ajustez cette variable si les menus sont trop rapprochés ou espacés en vertical.
	Pour mettre des menus de hauteurs différentes :
	var hauteur_menu = new Array(hauteur menu1, hauteur menu2, hauteur menu3...)
	Il faut faire attention à mettre autant de valeurs que de nombre de menu !
	Attention, si vous êtes en menu horizontal, mettez une largeur fixe (pas de Array) !
	*/
var hauteur_menu = 25;
 
/* En mode horizontal.
	Largeur des sous-menus, pour IE uniquement, les autres navigateurs respectent la largeur
	auto. Mettez "auto" uniquement si vous êtes sûr d'avoir mis des &nbsp; à la place des
	espace dans les items !
	Pour mettre des sous-menus de largeurs différentes :
	var largeur_sous_menu = new Array(largeur1, largeur2...).
	Il faut faire attention à mettre autant de valeurs que de menus.
	Si un menu n'a pas de sous-menus, il faut mettre quand même quelque chose !
	Il est possible de mettre "auto" dans certaines colonnes, à condition de respecter la
	consigne ci-dessus.
	*/
var largeur_sous_menu = 150;
 
/* Pour les navigateurs connaissant la largeur automatique (s'adapte au contenu), cette
	option (active par défaut) permet d'avoir une largeur automatique. En cas contraire
	(false), les sous menus auront la largeur largeur_sous_menu. */
var largeur_auto_ssmenu = true;
 
/* ... pour mettre un peu d'espace entre les menus ! */
var espace_entre_menus = 5;
 
 
/* position du menu par rapport au haut de l'écran ou de la page.
	0 = le menu est tout en haut. en px */
var top_menu = 196;  
 
/* En version horizontale.
	position des sous-menus par rapport au haut de l'écran ou de la page. Il faut prévoir
	la hauteur des menus, donc ne pas mettre 0 et faire "à tâton". en px */
var top_ssmenu = top_menu + 28;
 
/* Position gauche du menu, en px. */
var position_left;
var left_menu;
 
function position(){
   position_left = document.getElementById("corps").offsetLeft;
   left_menu = position_left + 20;
   document.getElementById("conteneurmenu").style.left = left_menu + "px";
}
 
 
/* En version verticale.
	Position des sous-menus par rapport au bord gauche de l'écran. */
var left_ssmenu = left_menu+largeur_menu+2;
 
/* Quand la souris quitte un sous-menu, si le sous-menu disparait immédiatement,
	cela gêne l'utilisateur. Alors on peut mettre un délai avant disparition du sous-menu.
	500 ms c'est bien :-) */
var delai = 650; // en milliseconde
 
/* En version horizontale.
	Comme le menu peut se superposer avec le texte de la page, il est possible de faire
	descendre un peu la page (on augmente la marge du haut) pour aérer un peu la page,
	une quarantaine de pixel c'est pas mal. en px*/
var marge_en_haut_de_page = top_menu + 40;
/* En version verticale.
	On décale le document à droite pour pas que le menu le superpose. */
var marge_a_gauche_de_la_page = 0 /*largeur_menu + 10;
 
 
/* Mettez à true si vous souhaitez que le menu soit toujours visible.
	Mettez false si vous ne le souhaitez pas, dans ce cas le menu "disparaîtra" quand vous
	descendrez dans la page. */
var suivre_le_scroll=true;
 
/* Pour IE uniquement, les balises <select> passent toujours au-dessus du menu, donc
	par défaut on cache les listes déroulantes quand le menu est ouvert, puis on les fait
	réapparaître à la fermeture du menu. Pour empêcher ça, mettre à false. */
var cacher_les_select=true;
 
 
var timeout; //ne pas toucher, c'est pour déclarer la variable
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 blnOk=true;
//pour enlever les "px" pour faire des calculs...
var reg = new RegExp("px", "g");
 
// onScroll pour Internet Explorer, le position:fixed fait ce boulot pour les autres navigateurs
// qui respectent les normes CSS...
window.onscroll = function()
{
	if (blnOk && suivre_le_scroll && (isIE || isIE5mac))
	{
		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="hidden";
		var cumul=0;
		for(i=1;i<=nbmenu;i++)
		{
			if (!vertical) {
				document.getElementById("menu"+i).style.top = document.body.scrollTop + top_menu + "px";
				if (document.getElementById("ssmenu"+i))//undefined
					document.getElementById("ssmenu"+i).style.top = document.body.scrollTop + top_ssmenu + "px";
			} else {
				document.getElementById("menu"+i).style.top = document.body.scrollTop
							+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
				if (document.getElementById("ssmenu"+i))//undefined
					document.getElementById("ssmenu"+i).style.top = document.body.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";
		//IE5 mac a un bug : quand un texte est dans un élément de style float, il n'apparait pas.
		/*if (isIE5mac)
		{
			document.getElementById("conteneurmenu").style="";
		}*/
	}
}
 
function Chargement() {
	if (!blnOk) {
		if(document.body.style.backgroundColor!="") { blnOk=false; }
		if(document.body.style.color!="") { blnOk=false; }
		if(document.body.style.marginTop!="") { blnOk=false; }
		if(document.getElementById) {
			with(document.getElementById("conteneurmenu").style) {
				if(position!="" || top!="" || left!=""
						|| width!="" || height!="" || zIndex!=""
						|| margin!="" || visibility!="") {
					blnOk=false;
				}
			}
		}
		else{
			blnOk=false;
		}
	}
 
	if(blnOk)
	{
		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();
	}
 
	// comme on a évité le clignotement, maintenant on fait apparaître le menu ;-)
	document.getElementById("conteneurmenu").style.visibility='';
}
window.onresize = Chargement;
 
/*
 * Place les éléments du menu correctement, au chargement, au scroll, au redimensionnement
 * de la fenêtre
 */
function positionne() {
	var largeur_fenetre = (isIE?document.body.clientWidth:window.innerWidth);
	var hauteur_fenetre = (isIE?document.body.clientHeight: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)*(largeur_menu+espace_entre_menus))+1+left_menu)+"px";
				left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
			} else {
				//top=(((i-1)*(hauteur_menu+espace_entre_menus))+1+top_menu)+"px";
				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)*(largeur_menu+espace_entre_menus))+1+left_menu)+"px";
					left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
				} else {
					left=left_ssmenu+"px";
					//top=(((i-1)*(hauteur_menu+espace_entre_menus))+1+top_menu)+"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) {
	if(blnOk) {
		AnnulerCacher();
		CacherMenus();
		if (document.getElementById(strMenu))//undefined
			with (document.getElementById(strMenu).style)
				visibility="visible";
	}
	SelectVisible("hidden",document.getElementsByTagName('select'));
}
 
function CacherDelai() {
	if (blnOk) {
		timeout = setTimeout('CacherMenus()',delai);
	}
}
function AnnulerCacher() {
	if (blnOk && timeout) {
		clearTimeout(timeout);
	}
}
function CacherMenus() {
	if(blnOk) {
		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... il ne capte pas bien les css pour les <li>, donc on les vire !
	if(blnOk&&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 (blnOk && cacher_les_select && (isIE||isIE5win))
		for (var i=0;i<elem.length;i++) elem[i].style.visibility=v;
}

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
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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<html>
 
	<head>
		<title>Cyclo Club de Vence</title>
		<META NAME="Description" CONTENT="Site du Cyclo club de Vence" />
		<META NAME="Keywords" CONTENT="Cyclo club de Vence, cyclisme, Vence, club cycliste, Alpes Maritimes, vélo, route, VTT, cyclisme sur la côte d'Azur, courses cyclistes, UFOLEP, 06" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="style.css" />
 
		<script language="javascript" src="menu02.js"></script>
		<link rel="stylesheet" type="text/css" href="menu.css" />
 
 
	<!-- D'après le script dispo sur lesite.org, mais grandement amélioré par
	Sylvain Machefert et Yvan Cassini
	voir http://iubito.free.fr/prog/menu.php pour toutes les explications
	Les infos sont dans le fichier "iubito's menu.txt". -->
 
	</head>
 
	<body onload="position()">
		<div id="global">
			<div id="logo">
				<img src="images/LOGO_CCVence.jpg" alt="logo CC Vence" />
			</div> <!-- fin LOGO -->
			<?	$page = $_GET['page']; ?>
		<div id="conteneurmenu">
		<script language="Javascript" type="text/javascript">
		// pour éviter le clignotement désagréable
		preChargement();
		</script>
		<!--------------- ACCUEIL ---------------------->
			<p id="menu1" class="menu"
				onmouseover="MontrerMenu('ssmenu1');"
				onmouseout="CacherDelai();">
			<a href="index.php"
				onmouseover="MontrerMenu('ssmenu1');"
				onfocus="MontrerMenu('ssmenu1');">Accueil<span>&nbsp;;</span></a>
		    </p>
		    <ul id="ssmenu1" class="ssmenu"
				onmouseover="AnnulerCacher();"
				onmouseout="CacherDelai();"
				onfocus="AnnulerCacher();"
				onblur="CacherDelai();">
				<li>
					<a href="index.php">Présentation Générale<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=11">(Ré-)Adhésion<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=12">Bureau<span>&nbsp;;</span></a>
				</li>
			</ul>
		<!--------------------- ROUTE ------------------------>
		    <p id="menu2" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu2');">
		                <a href="index.php?page=20"
				onfocus="MontrerMenu('ssmenu2');">Route<span>&nbsp;:</span></a>
		    </p>
		    <ul id="ssmenu2" class="ssmenu"
				onmouseover="AnnulerCacher();"
				onmouseout="CacherDelai();"
				onfocus="AnnulerCacher();"
				onblur="CacherDelai();">
				<li>
					<a href="index.php?page=20">Rdv des Cyclos<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=21">Résultats des Courses<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=22">Calendrier<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=23">Manifestations<span>&nbsp;;</span></a>
				</li>
		    </ul>
		<!----------------------- VTT ---------------------->
			<p id="menu3" class="menu"
				onmouseover="MontrerMenu('ssmenu3');"
				onmouseout="CacherDelai();">
		                <a href="index.php?page=30"
				onfocus="MontrerMenu('ssmenu3');">VTT<span>&nbsp;:</span></a>
 
			</p>
			<ul id="ssmenu3" class="ssmenu"
				onmouseover="AnnulerCacher();"
				onmouseout="CacherDelai();"
				onfocus="AnnulerCacher();"
				onblur="CacherDelai();">
				<li>
					<a href="index.php?page=30">Accueil VTT<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=31">Courses et Résultats<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=32">Calendrier<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=33">Photos<span>&nbsp;;</span></a>
				</li>
			</ul>
		<!---------------------- LA VENCOISE ROUTE ----------------------->
		    <p id="menu4" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu4');">
			  <a href="index.php?page=40"
				onfocus="MontrerMenu('ssmenu4');">La Vençoise Route<span>&nbsp;:</span></a>
		    </p>
		    <ul id="ssmenu4" class="ssmenu"
				onmouseover="AnnulerCacher();"
				onmouseout="CacherDelai();"
				onfocus="AnnulerCacher();"
				onblur="CacherDelai();">
				<li>
					<a href="index.php?page=40">Présentation<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=41">Inscription<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=42">Les Résultats<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=43">Photos de la Vençoise<span>&nbsp;;</span></a>
				</li>
			</ul>
		<!--------------------- LA VENCOISE VTT ------------------------>
		    <p id="menu5" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu5');">
			  <a href="index.php?page=50"
				onfocus="MontrerMenu('ssmenu5');">La Vençoise VTT<span>.</span></a>
		    </p>
			<ul id="ssmenu5" class="ssmenu"
				onmouseover="AnnulerCacher();"
				onmouseout="CacherDelai();"
				onfocus="AnnulerCacher();"
				onblur="CacherDelai();">
				<li>
					<a href="index.php?page=50">Présentation<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=51">Inscription<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=52">Le Parcours<span>&nbsp;;</span></a>
				</li>
				<li>
					<a href="index.php?page=53">Les Résultats<span>&nbsp;;</span></a>
				</li>
			</ul>
		<!---------------------- SPONSORS ----------------------->
		<p id="menu6" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu6');">
		      <a href="index.php?page=60"
				onfocus="MontrerMenu('ssmenu6');">Sponsors<span>&nbsp;:</span></a>
		    </p>
 
		<!--------------------- LIENS ------------------------>
		<p id="menu7" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu7');">
		      <a href="index.php?page=70"
				onfocus="MontrerMenu('ssmenu7');">Liens<span>&nbsp;:</span></a>
		    </p>
 
		<!--------------------- EMAILS------------------------>
		<p id="menu8" class="menu"
				onmouseout="CacherDelai();"
				onmouseover="MontrerMenu('ssmenu8');">
		      <a href="mailto:gcassini@ifrance.com"
				onfocus="MontrerMenu('ssmenu8');">E-mails<span>&nbsp;:</span></a>
		    </p>
 
		<!---------------------- FIN ----------------------->
		</div> <!-- fin ConteneurMenu -->
 
		<div id="corps">
			<? // PHP !
				switch ($page) {
					case 11:
					require "inscription.htm";
					break;
 
					case 12:
					require "bureau.htm";
					break;
 
					case 20:
					require "route.htm";
					break;
 
					case 21:
					require "resultats.htm";
					break;
 
					case 22:
					require "calendriers.htm";
					break;
 
					case 23:
					require "manifestations.htm";
					break;
 
					case 24:
					require "photosclub.htm";
					break;
 
					case 25:
					require "droit.htm";
					break;
 
					case 30:
					require "VTT.htm";
					break;
 
					case 31:
					require "resultatsVTT.htm";
					break;
 
					case 32:
					require "calendriersVTT.htm";
					break;
 
					case 33:
					require "Photosvtt.htm";
					break;
 
					case 40:
					require "LaVencoiseroute.htm";
					break;
 
					case 41:
					require "inscriptionvencoise.htm";
					break;
 
					case 42:
					require "resultatsvencoiseroute.htm";
					break;
 
					case 43:
					require "photosvencoise.htm";
					break;
 
					case 50:
					require "LaVencoisevtt.htm";
					break;
 
					case 51:
					require "inscriptionvencoisevtt.htm";
					break;
 
					case 52:
					require "parcoursvencoisevtt.htm";
					break;
 
					case 53:
					require "resultatsvencoisevtt.htm";
					break;
 
					case 60:
					require "Sponsors.htm";
					break;
 
					case 70:
					require "Liens.htm";
					break;
 
					default:
					require "accueil.htm";
					break;
				}
			?>
			<div id="copyright">© Cassini Grégory - Tous droits réservés</div>
		</div> <!-- fin Corps -->
 
		<script language="javascript">
			var nbmenu=8;
			Chargement();
		</script>
		</div> <!-- fin Global -->
	</body>
</html>

26/08/2007, 21h45
Lindorie

Personne peut m'aider? ça me pose un problème ce menu...

Re-bonjour

J'ai abandonné ce menu, je suis allée voir ici http://css.developpez.com/galerie/?p...-verticaux#MV6
J'ai donc intégré ce menu dans mes pages, le seul souci c'est que le fonctionnement ne marche pas... (Bisûnûrs si tu m'entends...)

Voici le code :

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
<head>
		<title>Cyclo Club de Vence</title>
		<META NAME="Description" CONTENT="Site du Cyclo club de Vence" />
		<META NAME="Keywords" CONTENT="Cyclo club de Vence, cyclisme, Vence, club cycliste, Alpes Maritimes, vélo, route, VTT, cyclisme sur la côte d'Azur, courses cyclistes, UFOLEP, 06" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="style.css" />
 
		<script language="javascript" src="functions.js"></script>
		<link rel="stylesheet" type="text/css" href="menu.css" />
 
	</head>
 
	<body>
		<div id="global">
			<div id="logo">
				<img src="images/LOGO_CCVence.jpg" alt="logo CC Vence" />
			</div> <!-- fin LOGO -->
			<?      $page = $_GET['page']; ?>
		<div id="menu">
		<!--------------- ACCUEIL ---------------------->
			<div class="menu" id="menu1" onmouseover="affiche(this)">
			<a href="index.php">Accueil</a>
					<div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php">Présentation Générale</a></div>
						<div><a href="index.php?page=11">(Ré-)Adhésion</a></div>
						<div><a href="index.php?page=12">Bureau</a></div>
					</div>
			</div>
		<!--------------------- ROUTE ------------------------>
			<div class="menu" id="menu2" onmouseover="affiche(this)">
			<a href="index.php?page=20">Route</a>
					<div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=20">Rdv des Cyclos</a></div>
						<div><a href="index.php?page=21">Résultats des Courses</a></div>
						<div><a href="index.php?page=22">Calendrier</a></div>
						<div><a href="index.php?page=23">Manifestations</a></div>
					</div>
			</div>
		<!----------------------- VTT ---------------------->
			<div class="menu" id="menu3" onmouseover="affiche(this)">
			<a href="index.php?page=30">VTT</a>
					<div class="sousmenu" id="sousmenu3" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=30">Accueil VTT</a></div>
						<div><a href="index.php?page=31">Courses et Résultats</a></div>
						<div><a href="index.php?page=32">Calendriers</a></div>
						<div><a href="index.php?page=33">Photos</a></div>
					</div>
			</div>
 
		<!---------------------- LA VENCOISE ROUTE ----------------------->
			<div class="menu" id="menu4" onmouseover="affiche(this)">
			<a href="index.php?page=40">La Vençoise Route</a>
					<div class="sousmenu" id="sousmenu4" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=40">Présentation</a></div>
						<div><a href="index.php?page=41">Inscription</a></div>
						<div><a href="index.php?page=42">Les Résultats</a></div>
						<div><a href="index.php?page=43">Photos</a></div>
					</div>
			</div>
 
		<!--------------------- LA VENCOISE VTT ------------------------>
		    <div class="menu" id="menu5" onmouseover="affiche(this)">
			<a href="index.php?page=50">La Vençoise VTT</a>
					<div class="sousmenu" id="sousmenu5" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=50">Présentation</a></div>
						<div><a href="index.php?page=51">Inscription</a></div>
						<div><a href="index.php?page=52">Le Parcours</a></div>
						<div><a href="index.php?page=53">Les Résultats</a></div>
					</div>
			</div>
		<!---------------------- SPONSORS ----------------------->
			<div class="menu" id="menu6" onmouseover="affiche(this)">
			<a href="index.php?page=60">Sponsors</a>
			</div>
 
		<!--------------------- LIENS ------------------------>
			<div class="menu" id="menu7" onmouseover="affiche(this)">
			<a href="index.php?page=70">Liens</a>
			</div>
 
		<!--------------------- EMAIL------------------------>
			<div class="menu" id="menu8" onmouseover="affiche(this)">
			<a href="index.php?page=80">E-mail</a>
			</div>
 
		<!---------------------- FIN ----------------------->
		</div> <!-- fin Menu -->

Code:

1
2
3
4
5
6
7
8
9
10
11
function affiche(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 2; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}

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
#menu{
	background-color: white;
	color:#fff;
	position: absolute;
	left: 10px;
	top: 176px;
	width: 120px;
}
#menu div{
	width:120px;
	text-align:center;
}
.menu{
	position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
	color: #fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-top:3px;
	height:22px;
	display:block;
}
#menu div a:link, #menu div a:visited{
	background-color:#000080;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
	background-color:#ffd700;
	color: black;
}
.sousmenu{
	position:absolute;
	left:120px;
	top:0;
}

Le souci c'est qu'arrivé à un certain point (ds mon cas, "la Vençoise route") quand on survole les menus, les sous-menus se superposent et ceux survolés précédemment s'affichent toujours...

Dans la fonction JS, il faut que tu modifies :
Code:

1 2 3 for(var i = 1; i <= 2; i++){ document.getElementById('sousmenu'+i).style.display = "none"; }
par :
Code:

1 2 3 for(var i = 1; i <= 5; i++){ document.getElementById('sousmenu'+i).style.display = "none"; }
avec i <= n où n est le nombre de tes sous-menus.

En fait après avoir étudié la fontion javascript il suffisait de changer le 2 par un 5 (équivalent au nombre de menus ayant des sous-menus) :
Code:

1 2 3 4 5 6 7 8 9 10 11 function affiche(obj){ var id = obj.id; for(var i = 1; i <= 5; i++){ document.getElementById('sousmenu'+i).style.display = "none"; } if(document.getElementById('sous'+id)){ document.getElementById('sous'+id).style.display = "block"; } }
Merci Bisûnûrs pour ce menu qui me facilite la vie :D

EDIT : J'avais pas vu ta réponse Bisûnûrs, merci quand même 8-)