https://guer-coetquidan-broceliande.fr/bisto/guer/menu-canton.js

1/* menu-canton.js- configuration du javascript */
2
3/* true = le menu sera vertical, à gauche.
4   false = le menu sera horizontal, en haut. */
5var vertical = false;
6
7/* Centrer le menu ? (true/false).
8	Centre horizontalement ou verticalement suivant le mode choisi. */
9var centrer_menu = true;
10
11/* On est obligé de définir une largeur pour les menus.
12	Pour mettre des menus de largeurs différentes :
13	var largeur_menu = new Array(largeur menu1, largeur menu2, largeur menu3...)
14	Il faut faire attention à mettre autant de valeurs que de nombre de menu !
15	Attention, si vous êtes en menu vertical, mettez une largeur fixe (pas de Array) !
16	*/
17var largeur_menu = 88;
18
19/* En mode vertical, on a besoin de connaître la hauteur de chaque menu.
20	Même si les "cases" ne sont pas dimensionnées en hauteur.
21	Ajustez cette variable si les menus sont trop rapprochés ou espacés en vertical.
22	Pour mettre des menus de hauteurs différentes :
23	var hauteur_menu = new Array(hauteur menu1, hauteur menu2, hauteur menu3...)
24	Il faut faire attention à mettre autant de valeurs que de nombre de menu !
25	Attention, si vous êtes en menu horizontal, mettez une largeur fixe (pas de Array) !
26	*/
27var hauteur_menu = 25;
28
29/* En mode horizontal.
30	Largeur des sous-menus, pour IE uniquement, les autres navigateurs respectent la largeur
31	auto. Mettez "auto" uniquement si vous êtes sûr d'avoir mis des   à la place des
32	espace dans les items !
33	Pour mettre des sous-menus de largeurs différentes :
34	var largeur_sous_menu = new Array(largeur1, largeur2...).
35	Il faut faire attention à mettre autant de valeurs que de menus.
36	Si un menu n'a pas de sous-menus, il faut mettre quand même quelque chose !
37	Il est possible de mettre "auto" dans certaines colonnes, à condition de respecter la
38	consigne ci-dessus.
39	*/
40var largeur_sous_menu = 120;
41
42/* Pour les navigateurs connaissant la largeur automatique (s'adapte au contenu), cette
43	option (active par défaut) permet d'avoir une largeur automatique. En cas contraire
44	(false), les sous menus auront la largeur largeur_sous_menu. */
45var largeur_auto_ssmenu = false;
46
47/* ... pour mettre un peu d'espace entre les menus ! */
48var espace_entre_menus = 8;
49
50
51/* position du menu par rapport au haut de l'écran ou de la page.
52	0 = le menu est tout en haut. en px */
53var top_menu = 30;
54/* En version horizontale.
55	position des sous-menus par rapport au haut de l'écran ou de la page. Il faut prévoir
56	la hauteur des menus, donc ne pas mettre 0 et faire "à tâton". en px */
57var top_ssmenu = top_menu + 20;
58
59/* Position gauche du menu, en px. */
60var left_menu = 0;
61/* En version verticale.
62	Position des sous-menus par rapport au bord gauche de l'écran. */
63var left_ssmenu = largeur_menu+2;
64
65/* Quand la souris quitte un sous-menu, si le sous-menu disparait immédiatement,
66	cela gêne l'utilisateur. Alors on peut mettre un délai avant disparition du sous-menu.
67	500 ms c'est bien :-) */
68var delai = 300; // en milliseconde
69
70/* En version horizontale.
71	Comme le menu peut se superposer avec le texte de la page, il est possible de faire
72	descendre un peu la page (on augmente la marge du haut) pour aérer un peu la page,
73	une quarantaine de pixel c'est pas mal. en px*/
74var marge_en_haut_de_page = top_menu + 0;
75/* En version verticale.
76	On décale le document à droite pour pas que le menu le superpose. */
77var marge_a_gauche_de_la_page = largeur_menu + 10;
78
79
80/* Mettez à true si vous souhaitez que le menu soit toujours visible.
81	Mettez false si vous ne le souhaitez pas, dans ce cas le menu "disparaîtra" quand vous
82	descendrez dans la page. */
83var suivre_le_scroll=false;
84
85/* Pour IE uniquement, les balises <select> passent toujours au-dessus du menu, donc
86	par défaut on cache les listes déroulantes quand le menu est ouvert, puis on les fait
87	réapparaître à la fermeture du menu. Pour empêcher ça, mettre à false. */
88var cacher_les_select=true;
89
90var nbmenu = 0; //Auto-calculé
91var timeout; //ne pas toucher, c'est pour déclarer la variable
92var agt = navigator.userAgent.toLowerCase();
93var isMac = (agt.indexOf('mac') != -1);
94var isOpera = (agt.indexOf('opera') != -1);
95var IEver = parseInt(agt.substring(agt.indexOf('msie ') + 5));
96var isIE = ((agt.indexOf('msie')!=-1 && !isOpera && (agt.indexOf('webtv')==-1)) && !isMac);
97var isIE5win = (isIE && IEver >= 5);
98var isIE5mac = ((agt.indexOf('msie') != -1) && isMac);
99var isSafari = (agt.indexOf('safari') != -1);
100
101//pour enlever les "px" pour faire des calculs...
102var reg = new RegExp("px", "g");
103
104// onScroll pour Internet Explorer, le position:fixed fait ce boulot pour les autres navigateurs
105// qui respectent les normes CSS...
106window.onscroll = function()
107{
108	if (suivre_le_scroll && (isIE || isIE5mac))
109	{
110		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="hidden";
111		var cumul=0;
112		for(i=1;i<=nbmenu;i++)
113		{
114			var scrollTop = (document.documentElement&&document.documentElement.scrollTop
115								?document.documentElement.scrollTop
116								:document.body.scrollTop);
117			if (!vertical) {
118				document.getElementById("menu"+i).style.top = scrollTop + top_menu + "px";
119				if (document.getElementById("ssmenu"+i))//undefined
120					document.getElementById("ssmenu"+i).style.top = scrollTop + top_ssmenu + "px";
121			} else {
122				document.getElementById("menu"+i).style.top = scrollTop

123							+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
124				if (document.getElementById("ssmenu"+i))//undefined
125					document.getElementById("ssmenu"+i).style.top = scrollTop
126							+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
127				cumul += isFinite(hauteur_menu)?hauteur_menu:hauteur_menu[i-1];
128			}
129		}
130		if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="visible";
131	}
132}
133
134function preChargement()
135{
136	if (document.getElementById("conteneurmenu"))
137		document.getElementById("conteneurmenu").style.visibility="hidden";
138}
139
140function Chargement() {
141	
142	//Compte nbmenu
143	nbmenu = 0;
144	while (document.getElementById("menu"+(nbmenu+1)))
145		nbmenu++;
146	
147	document.getElementById("conteneurmenu").style.visibility="hidden";
148	trimespaces();
149	with(document.body.style) {
150		if (!vertical) marginTop=marge_en_haut_de_page+"px";
151		else		   marginLeft=marge_a_gauche_de_la_page+"px";
152	}
153	
154	positionne();
155	CacherMenus();
156	
157	//pour Safari, qui a du mal à afficher le menu parfois, le fait de changer la taille
158	//des caractères corrige le problème. Merci Stol ! http://iubito.free.fr/forum/read.php?id=705&f=2
159	if(isSafari)
160		document.getElementById('conteneurmenu').style.fontSize='10px';
161	
162	// comme on a évité le clignotement, maintenant on fait apparaître le menu ;-)
163	document.getElementById("conteneurmenu").style.visibility='';
164}
165window.onresize = Chargement;
166
167/*
168 * Place les éléments du menu correctement, au chargement, au scroll, au redimensionnement
169 * de la fenêtre
170 */
171function positionne() {
172	//Calcul hauteur et largeur fenêtre compatible avec certains doctypes IE
173	var largeur_fenetre;
174	if (document.documentElement && document.documentElement.clientWidth) {
175		largeur_fenetre = document.documentElement.clientWidth;
176	} else if (document.body && document.body.clientWidth) {
177		largeur_fenetre = document.body.clientWidth;
178	} else if (window.innerWidth) {
179		largeur_fenetre = window.innerWidth;
180	}
181
182	var hauteur_fenetre;
183	if (document.documentElement && document.documentElement.clientHeight) {
184		hauteur_fenetre = document.documentElement.clientHeight;
185	} else if (document.body && document.body.clientHeight) {
186		hauteur_fenetre = document.body.clientHeight;
187	} else if (window.innerHeight) {
188		hauteur_fenetre = window.innerHeight;
189	}
190
191	if (centrer_menu) {
192		if (!vertical) {
193			var largeur_totale = espace_entre_menus * (nbmenu-1);
194			if (isFinite(largeur_menu))
195				largeur_totale += largeur_menu * nbmenu;
196			else {
197				for (i = 1; i <= nbmenu; i++)
198					largeur_totale += largeur_menu[i-1];
199			}
200			left_menu = (largeur_fenetre - largeur_totale)/2;
201		} else {
202			var hauteur_totale = espace_entre_menus * (nbmenu-1);
203			if (isFinite(hauteur_menu))
204				hauteur_totale += hauteur_menu * nbmenu;
205			else {
206				for (i = 1; i <= nbmenu; i++)
207					hauteur_totale += hauteur_menu[i-1];
208			}
209			top_menu = (hauteur_fenetre - hauteur_totale)/2;
210		}
211	}
212	
213	//Menus
214	var cumul = 0;
215	for(i=1;i<=nbmenu;i++) {
216		with(document.getElementById("menu"+i).style) {
217			if (!vertical) {
218				top=top_menu+"px";
219				left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
220			} else {
221				top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
222				left=left_menu+"px";
223			}
224			if (!suivre_le_scroll || isIE || isIE5mac)
225				position="absolute";
226			else position="fixed";
227			//if (vertical) height=hauteur_menu+"px";
228			margin="0";
229			zIndex="2";
230			if (vertical || isFinite(largeur_menu))
231				width=largeur_menu+"px";
232			else
233				width=largeur_menu[i-1]+"px";
234			if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
235				cumul += (!vertical?largeur_menu:hauteur_menu);
236			}
237			else {
238				cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
239				if (vertical) height=hauteur_menu[i-1]+"px";
240			}
241		}
242	}
243	
244	//Sous-menus
245	cumul = 0;
246	for(i=1;i<=nbmenu;i++) {
247		if (document.getElementById("ssmenu"+i))//undefined
248		{
249			with(document.getElementById("ssmenu"+i).style) {
250				if (!suivre_le_scroll || isIE || isIE5mac)
251					position="absolute";
252				else position="fixed";
253				if (!vertical) {
254					top=top_ssmenu+"px";

255					left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
256				} else {
257					left=left_ssmenu+"px";
258					top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
259				}
260				if (isIE || isOpera || isIE5mac || !largeur_auto_ssmenu) {
261					if (isFinite(largeur_sous_menu))
262						width = largeur_sous_menu+(largeur_sous_menu!="auto"?"px":"");
263					else
264						width = largeur_sous_menu[i-1]+(largeur_sous_menu[i-1]!="auto"?"px":"");
265				}
266				else width = "auto";
267				if (!vertical && !isIE5mac) {
268					//repositionnement si déborde à droite
269					if ((width != "auto")
270						&& ((left.replace(reg,'').valueOf()*1 + width.replace(reg,'').valueOf()*1) > largeur_fenetre))
271						left = (largeur_fenetre-width.replace(reg,'').valueOf())+"px";
272				}
273				margin="0";
274				zIndex="3";
275			}
276		}
277		if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
278			cumul += (!vertical?largeur_menu:hauteur_menu);
279		}
280		else {
281			cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
282		}
283	}
284}
285
286function MontrerMenu(strMenu) {
287	AnnulerCacher();
288	CacherMenus();
289	if (document.getElementById(strMenu))//undefined
290		with (document.getElementById(strMenu).style)
291			visibility="visible";
292	SelectVisible("hidden",document.getElementsByTagName('select'));
293}
294
295function CacherDelai() {
296	timeout = setTimeout('CacherMenus()',delai);
297}
298function AnnulerCacher() {
299	if (timeout) {
300		clearTimeout(timeout);
301	}
302}
303function CacherMenus() {
304	for(i=1;i<=nbmenu;i++) {
305		if (document.getElementById("ssmenu"+i))//undefined
306			with(document.getElementById("ssmenu"+i).style)
307				visibility="hidden";
308	}
309	SelectVisible("visible",document.getElementsByTagName('select'));
310}
311
312function trimespaces() {
313	//Contourne un bug d'IE5/win... il ne capte pas bien les css pour les <li>, donc on les vire !
314	if(isIE5win) {
315		for(i=1;i<=nbmenu;i++) {
316			if (document.getElementById("ssmenu"+i))//undefined
317				with(document.getElementById("ssmenu"+i))
318					innerHTML = innerHTML.replace(/<LI>|<\/LI>/g,"");
319		}
320	}
321}
322
323function SelectVisible(v,elem) {
324	if (cacher_les_select && (isIE||isIE5win))
325		for (var i=0;i<elem.length;i++) elem[i].style.visibility=v;
326}