11550 sujets

JavaScript, DOM et API Web HTML5

Problème menu déroulant javascript [Résolu]

Bonjour
J'utilise un menu déroulant associé à une fonction javascript dont voici les codes :

		<dl class="menu">
			<dt id="accueil"><a href="accueil.html"></a></dt>

			<dt id="team"><a href="team.html"></a></dt>
			
			<dt id="photos"><a href="2011_photos.html"></a></dt>	

			<dt id="historique" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"></dt>
				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">		
					<ul>
						<li><a href="2010_news.html">2010</a>&nbsp;</li>
						<li><a href="2009_news.html">2009</a>&nbsp;</li>
						<li><a href="2008_news.html">2008</a>&nbsp;</li>
					</ul>
				</dd>	

			<dt id="partenaires"><a href="partenaires.html"></a></dt>		
		</dl> <!-- FIN menu -->


<script type="text/javascript">
<!--
	window.onload=montre;
	function montre(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=10; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
	}
//-->
</script>


Problème : au chargement de la page, le sous-menu apparait malgré le "window.onload=montre". J'ai essayé sans résultat avec :
<body onload="javascript:montre();">


Merci de me donner une idée pour éviter que le sous-menu ne s'affiche pas au chargement de la page mais uniquement lorsque le curseur passe sur le menu de 1° niveau.
Modifié par Papapetch (22 Jun 2011 - 12:59)
Bonjour,
Voici quelque chose qui pourrait t'aider, si j'ai bien compris ce que tu cherches à faire. Cependant, pour créer un menu, l'utilisation de listes de définitions (dl) n'est pas la meilleure solution. Il est préférable d'utiliser des balises ul et li.
Tu remarqueras que j'ai modifié complètement le script js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test menu</title>
<style type="text/css">
/*<![CDATA[*/
.menu {width:250px}
.ssmenu {
display:none;
font-weight:bold;
background:#E9E9E9;
width:100px;
color:#555;
padding:5px;
list-style:none;
}
.cat {cursor:pointer;color: #000}
a:link {color: #000; text-decoration: none;}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function montre(id) { 
var d = document.getElementById(id).style;
(d.display=="block")? d.display="none" : d.display="block";
} 
//]]>
</script>
</head>
<body>
<dl class="menu"> 
<dt id="accueil"><a href="accueil.html">Aaaaaaaaa</a></dt> 
<dt id="team"><a href="team.html">Bbbbbbbb</a></dt> 
<dt id="photos"><a href="2011_photos.html">Ccccccccc</a></dt>
<dt id="historique" class="cat" onmouseover="montre('smenu1');" onmouseout="montre('smenu1');">Historique
<dd onmouseover="montre('smenu1');" onmouseout="montre('smenu1');">   
<ul id="smenu1" class="ssmenu"> 
<li><a href="2010_news.html">2010</a>&nbsp;</li> 
<li><a href="2009_news.html">2009</a>&nbsp;</li> 
<li><a href="2008_news.html">2008</a>&nbsp;</li> 
</ul> 
</dd>
</dt>
<dt id="partenaires"><a href="partenaires.html">Ddddddddd</a></dt>         
</dl> <!-- FIN menu -->
</body>
</html>

Cordialement
Sujet clos
Aller à