Menu déroulant, bug de JS ?
Posté : 14 août 2006, 18:01
J'aimerais finir mon menu déroulant, mais je rencontre un petit bug sur le script JS.
Voici le code complet de la page :
lorsque je passe ma souris sur le Menu 1 (le seul auquel est appliqué le JS pour le moment), le sous menu apparait, mais il ne reste que 2 secondes, pourtant, la souris est toujours dessus, donc il ne devrait pas quitter l'état 'onMouseOver'. Pourtant on dirait bien qu'il passe en 'onMouseOut', et prend bien en compte mon timeout.
Comment régler ce problème ?
Voici le code complet de la page :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
var blnOk=true;
var timeout;
var delai = 350;
var nbmenu = 10;
function montre(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=nbmenu; i++)
{
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
}
}
if (d)
{
d.style.display='block';
}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 110px;
}
#menu dt {
cursor: pointer;
text-align: center;
border: 1px solid #c65157;
margin: 1px;
color: #c65157;
}
#menu dd {
display: none;
border: 1px solid #c65157;
}
#menu ul {
font-size: 10px;
}
#menu li {
text-align: center;
margin: 3px;
}
#menu li a, #menu dt a {
color: #c65157;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background-color: #c65157;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:setTimeout('montre()',2000);">
<dt><a href="">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu2');"><a href="">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="">Menu 3</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="">Menu 4</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="">Menu 5</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="">Menu 6</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu7');"><a href="">Menu 7</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 7.1</a></li>
<li><a href="#">Sous-Menu 7.2</a></li>
<li><a href="#">Sous-Menu 7.3</a></li>
<li><a href="#">Sous-Menu 7.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="">Menu 8</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu9');"><a href="">Menu 9</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 9.1</a></li>
<li><a href="#">Sous-Menu 9.2</a></li>
<li><a href="#">Sous-Menu 9.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
Comment régler ce problème ?
