Créer menu déroulant onmouseout

Version imprimable

Bonjour,
J'ai créer un menu de navigation pour mon site. Le menu fonctionne sous IE7 et FF avec du css.
Pour IE6 j'ai essayé en Javascript avec une fonction toute simple...
Mon soucis c'est qu'on est obligé de descendre la souris sur un élément du menu pour qu'il se ferme si on retire la souri.

Je ne sais pas si c'est très clair...

J'ai un Lien déclencheur qui ouvrira le sous menu.
- Si je place la souris sur le Lien déclencheur, le menu s'ouvre, si je descend la souris sur un élément du menu ça fonctionne.
- Si je retire ma souris du menu, il se ferme (logique !).

Par contre,
Si je place ma souri sur le Lien déclencheur, et que je ne descend pas sur le menu, le menu reste ouvert...

Voici le code html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <ul id="navigation"> <li id="LienDeclancheur" onmouseover="(document.getElementById('sousMenu').style.display='block');"><a href="AfficherPage.php?Index=0" title="aller à la section 1" >OuvrirMenu</a> <ul id="sousMenu" onmouseOut="javascript:(document.getElementById('sousMenu').style.display='none');"> <li><a href="#">Qui sommes-nous?</a></li> <li><a href="#">Contactez-nous</a></li> </ul> </li> <li id="LeStress"><a href="AfficherPage.php?Index=1" title="aller à la section 2" >Le Stress</a></li> <li id="Themes"><a href="AfficherPage.php?Index=2" title="aller à la section 3">Thèmes</a></li> <li id="Formations"><a href="AfficherPage.php?Index=3" title="aller à la section 4" Class="Formations">Formations</a></li> <li id="Tarifs"><a href="AfficherPage.php?Index=4" title="aller à la section 5">Tarifs</a></li> <li id="Lexique"><a href="AfficherPage.php?Index=5" title="aller à la section 5">Lexique</a></li> <li id="Liens"><a href="AfficherPage.php?Index=6" title="aller à la section 5">Liens</a></li> <li id="LivreOr"><a href="AfficherPage.php?Index=7" title="aller à la section 5" Class="LivreOr">Livre d'Or</a></li> </ul> </div>
Merci de votre aide

Et bien je viens une nouvelle fois de trouver la solution (alors que je cherche depuis 2jours... C'est ainsi !)
J'ai trouvé la reponse sur se site : http://javascript-array.com/scripts/...rop_down_menu/

J'ai adapté le code en remplacant le paramètre :

Citation:

style.visibility='visible' OU 'hidden'

par

Citation:

style.display='block' OU 'none'

Voici mon code HTML adapté :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="navigation"> 
	<li id="H2E"><a onmouseover="mopen('sousMenu')" onmouseout="mclosetime()" href="AfficherPage.php?Index=0" title="aller à la section 1">H2E</a>
		<ul id="sousMenu" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<li><a href="#">Qui sommes-nous?</a></li>
			<li><a href="#">Contactez-nous</a></li>
		</ul>
	</li>
	<li id="LeStress"><a href="AfficherPage.php?Index=1" title="aller à la section 2" >Le Stress</a></li>     
	<li id="Themes"><a href="AfficherPage.php?Index=2" title="aller à la section 3">Thèmes</a></li>     
	<li id="Formations"><a href="AfficherPage.php?Index=3" title="aller à la section 4" Class="Formations">Formations</a></li>      
	<li id="Tarifs"><a href="AfficherPage.php?Index=4" title="aller à la section 5">Tarifs</a></li> 
	<li id="Lexique"><a href="AfficherPage.php?Index=5" title="aller à la section 5">Lexique</a></li> 
	<li id="Liens"><a href="AfficherPage.php?Index=6" title="aller à la section 5">Liens</a></li> 
	<li id="LivreOr"><a href="AfficherPage.php?Index=7" title="aller à la section 5" Class="LivreOr">Livre d'Or</a></li> 
</ul>

Et le code Javascript qui va bien :

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
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();
 
	// close old layer
	if(ddmenuitem) ddmenuitem.style.display = 'none';
 
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.display = 'block';
 
}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.display = 'none';
}
 
// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
 
// close layer when click-out
document.onclick = mclose;

J'ai placé se code dans un fichier script.js (pour le moment) pensez juste à référencer le fichier dans le Head de la page :

Code:

1
2
3
4
 
<HEAD>
     <script type="text/javascript" src="script.js"></script>
</HEAD>

Voila !

24/07/2011, 21h41
jojo86

Je rouvre le topic car le code ci-dessus me fait planter IE 8 alors que sous IE6 aucun soucis...

Voici une page de test :
http://georges86.free.fr/test/Index.php
Le code n'est pas très propre, je suis en phase bidouillage...

Sous FF lorsqu'on place la souri sur "Contact..." un menu apparait et disparait lorsque la souris n'est plus dessus...
Sous IE, rien à faire le menu ne disparait pas... Sauf si on clic sur la page...

Merci de votre aide.
24/07/2011, 23h39
jojo86

Truc de fou...
J'ai épluché tout mon css et le bug venait d'un paramètre

Code:

border: 1px solid green ;

affecté à un

Code:

#param li a{ }