Menu déroulant et Firefox

Version imprimable

Bonjour,

J'ai récupéré un menu déroulant qui fonctionne parfaitement sous Internet Explorer mais pas sous Firefox :

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
<SCRIPT language=JavaScript>
document.onmouseover = openIt; 
 
function openIt()
{
	var items = 2;
	currEl = window.event.toElement
	if (currEl.className == "two")
	{
		newId = currEl.id + "box" 
		showBox = document.all(newId) 
		showBox.style.display = "block" 
	}        
	for (i=1; i<=items; i++)
	{
		openItem="item" + i + "box"
		elOpen = document.all(openItem)
			if ((elOpen.style.display == "block")&&(elOpen != showBox)) 
					elOpen.style.display = "none" 
			if (currEl.className == "closeIt")
			{ 
				elOpen.style.display = "none" 
			} 
	}
}
 
function closeIt()
{
	document.all.item1box.style.display = "none";
	document.all.item2box.style.display = "none";
}
 
document.onclick = closeIt;
</SCRIPT>

Voici une partie du HTML :

Code:

1
2
3
4
5
6
7
8
9
 
<span onMouseOut=closeIt()><a class="two" id="item1" href=#>Nos produits</a><br>
<table class="box" id="item1box" onMouseOver="this.style.display = 'block'" style="DISPLAY: none" width="100%" cellpadding="2">
	<tr><td><a class="sousmenu" href="index.php?to=caisses" title="Caisses">Caisses</a></td></tr>
	<tr><td><a class="sousmenu" href="index.php?to=caisses_navette" title="Caisses navettes">Caisses navettes</a></td></tr>
	<tr><td><a class="sousmenu" href="index.php?to=amenagements_calages" title="Caisses : aménagements et calages">Caisses : aménagements et calages</a></td></tr>
	<tr><td><a class="sousmenu" href="index.php?to=palettes_emballages" title="Palettes et emballages divers">Palettes et emballages divers</a></td></tr>
</table>
</span>

Quelqu'un aurait-il une idée sur le problème ?

Merci,
Franck

13/10/2008, 09h10
le_chomeur

onMouseOut par onmouseout déja :) après a voir :)
13/10/2008, 09h20
Bovino
Code:

currEl = window.event.toElement

est spécifique IE, essaye plutôt :
Code:

1 2 3 4 5 function openIt(e){ ... var e=window.event || e currEl = window.event?e.toElement:e.relatedTarget; ...
De plus, essaye aussi de terminer tes instructions par des ';' ;)

Merci pour votre aide.

J'ai modifié comme vous l'avez indiqué mais ça ne fonctionne toujours pas avec Firefox :cry:. Sous IE, ça fonctionne toujours aussi bien :).
18% des visiteurs de mon site sont sous Firefox...
Voici le lien de avec le menu en action, voir "Nos produits" et Nos services" http://www.ebs-france.com/zev2/index.php

Merci,
Franck

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
<SCRIPT language=JavaScript>	   
document.onmouseover = openIt; 
 
function openIt(e)
{
	var items = 2;
	var e=window.event || e;
	currEl = window.event?e.toElement:e.relatedTarget;
	if (currEl.className == "two")
	{
		newId = currEl.id + "box"; 
		showBox = document.getElementById(newId); 
		showBox.style.display = "block"; 
	}        
	for (i=1; i<=items; i++);
	{
		openItem="item" + i + "box";
		elOpen = document.getElementById(openItem);
			if ((elOpen.style.display == "block")&&(elOpen != showBox)) 
					elOpen.style.display = "none"; 
			if (currEl.className == "closeIt")
			{ 
				elOpen.style.display = "none"; 
			} 
	}
}
 
function closeIt()
{
	document.all.item1box.style.display = "none";
	document.all.item2box.style.display = "none";
}
 
document.onclick = closeIt;
</SCRIPT>

13/10/2008, 13h44
Franckdu34

Ca marche

Oups, ça fonctionne !!! :yaisse2:

J'avais aussi oublié les guillemets après le href=

<span onmouseout=closeIt()><a class="two" id="item1" href="#">

Encore merci pour votre aide, c'est très sympa.
Franck
13/10/2008, 13h59
Franckdu34

Il reste un tout petit problème

Re-bonjour,

Il reste une tout petit problème :
- sous IE le menu se déroule dès que l'on est sur le lien
- sous Firefox il faut descendre la souris pour que le menu se déroule

Une idée pour que ça fasse la même chose que sous IE ?

Merci,
Franck
21/10/2008, 16h00
Franckdu34

Menu déroulant avec Firefox

Bonjour,

Je laisse le lien vers le site avec le menu déroulant en action :
http://www.ebs-france.com/zev2/

Si quelqu'un a une idée concernant le fait que sous Firefox je dois descendre le curseur de la souris pour que le menu se déroule.

Merci d'avance.
Franck

testé sous ie 7 et FF3 :

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
 
<html>
<head>
	<title>menu</title>
	<style type="text/css">
		.menu li{
			float:left;
			display:block;
			width:150px;
			position:relative;
			padding:0px;
			margin:0px 5px 0px 0px;
			background-color:red;
		}
 
		.menu li:hover .SousMenu{
			display:block;
		}
 
		.SousMenu{
			position:absolute;
			left:0px;
			top:20px;
			display:none;
			margin:0px;
			padding:0px;
		}
		.SousMenu li{
			float:left;
			clear:both;
		}
	</style>
	<script type="text/javascript">
		function UpDown(me,etat)
		{
			var HaveChild = (me.getElementsByTagName('ul').length > 0) ? true:false;
			if(HaveChild)
			{
				me.getElementsByTagName('ul')[0].style.display = (etat)? "block":"none";
			}
		}
 
		function initMenu(){
			var listeLi = document.getElementById('menu').getElementsByTagName('li');
			for(var i = 0  , l = listeLi.length ; i <l ; i++){
				listeLi[i].onmouseover = function(){UpDown(this,true);};
				listeLi[i].onmouseout = function(){UpDown(this,false);};
 
			}
		}
	</script>
</head>
<body>
<ul class="menu" id="menu">
	<li>Accueil</li>
	<li>Présentation</li>
	<li>Nos produits
	<ul class="SousMenu">
		<li>Caisses</li>
		<li>Caisses navettes</li>
		<li>Caisses : aménagements et calages</li>
		<li>Palettes et emballages divers</li>
	</ul>
	</li>
	<li>
	 	Nos services
		<ul class="SousMenu">
			<li>Emballage industriel</li>
			<li>Mise en container</li>
			<li>Livraison</li>
		</ul>
	</li>
	<li>Contact</li>
 
</ul>
<script type="text/javascript">initMenu();</script>
</body>
</html>

un peu plus propre a mon gout tu n'a plus qu'a modifier les couleurs :)

21/10/2008, 19h23
Franckdu34

J'ai testé

Bonsoir,

C'est vrai que c'est chouette quand il n'y a pas d'erreurs :D, je ne suis pas habitué...
Je l'ai testé, il fonctionne super bien : http://www.ebs-france.com/zev2/zmenu.php

Le petit problème c'est que maintenant il faut que je le mette en forme :oops:.
Bon pour la couleur de fond, pas de problème:lol:.
J'ai essayé de trafiquer le code CSS mais je ne vois pas bien où je dois ajouter mes xxx:link {text-decoration: none; font-family:Verdana; font-size:7.5pt; font-weight: bold; color: #FFFFFF} ... etc pour les liens des "sous menus" et également pour mettre la police du "menu" (Nos produits et Nos Services) xxx:link {text-decoration: none; font-family:Verdana; font-size:7.5pt; font-weight: bold; color: #FFFFFF} ... etc.

J'abuse, je sais. Mais je fais des efforts.

Merci pour ton aide,
Franck

testé en ligne par rapport a ton menu voici le 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
 
.menu li{
			float:left;
			display:block;
			width:150px;
			position:relative;
			padding:4px;
			margin:0px 0px 0px 0px;
			background-color:#406198;
			text-align:center;
			font-family:Verdana;
			font-size:7.5pt;
			font-weight: bold;
			color: #FFFFFF
		}
 
		.menu li a{
			text-align:left;
			text-decoration: none;
display:block;
color:#FFFFFF;
		}
		.menu li a:hover{
			color:#89BA0A;
		}
 
 
		.menu li:hover .SousMenu{
			display:block;
		}
 
		.SousMenu{
			position:absolute;
			left:0px;
			top:20px;
			display:none;
			margin:0px;
			padding:0px;
		}
		.SousMenu li{
			float:left;
			clear:both;
		}

seule différence , la largeur du menu , et le fait que les liens soient sur deux lignes si trop long :)

22/10/2008, 19h56
Franckdu34

J'exagère

Bonsoir,

C'est nickel, tu me maches le travail... Mais je m'apperçois que je suis vraiment larguer:oops:. Depuis fin 2003/début 2004 je ne me suis pas replonger là dedans (PHP, CSS). Le prochain site, c'est un pro qui le fera !

Je ne parviens pas à reproduire la présentation initiale avec mon menu "plein d'erreurs", est-ce qu'il est possible de réduire la largeur (width:150px;) pour le menu principal (Accueil, Présentation, Nos produits, Nos services, Contact) et de mettre les 2 boites qui se déroulent à une taille différente ?
Ton menu en action : http://www.ebs-france.com/zmenu.php
Le menu "plein d'erreurs" en action : http://www.ebs-france.com/ avec la présentation souhaitée.

Merci beaucoup,
Franck