11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Menu vertical qui reste tout le temps ouvert

Bonjour à tous !

Je viens d'appliquer avec zèle (et apparemment étourderie ou manque de compétences Smiley ravi ) le menu déroulant de Raphaël mais il reste tout le temps ouvert : mon menu qui reste ouvert.
J'en déduis que je dois avec un problème avec le javascript puisque c'est un problème dynamique. Alors voici mon code :

en head :
<script language="JavaScript" 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';}
}
suivi de mes autres JS du type preload.

dans le body :
<dl id="menu">			
	  <dt onclick="javascript:montre();"><a href="../projets-presentation.htm" title="Présentation des projets">Pr&eacute;sentation</a></dt>
	  <dt onclick="javascript:montre('smenu2');"><a href="../projets-2006-07.htm">Ann&eacute;e 2006-2007</a></dt>
	   <dd id="smenu2">
		<ul><li><a href="2006-videos.htm">Projets videos</a></li>
		  <li>Projets audio</li>
		  <li><a href="2006-diapos.htm">Projets diapos</a></li>
		  <li><a href="2006-dossiers.htm">Projets dossiers</a></li>
		  <li><a href="2006-sites.htm">Sites internet</a></li>
		  <li><a href="2006-reactions.htm">R&eacute;actions d'&eacute;l&egrave;ves</a></li>
		</ul>
       </dd>
	  <dt onclick="javascript:montre('smenu3');"><a href="../projets-2005-06.htm">Ann&eacute;e 2005-2006</a></dt>
	   <dd id="smenu3">
		<ul><li><a href="../2005-06/2005-videos.htm">Projets videos</a></li>
		  <li><a href="../2005-06/2005-audio.htm">Projets audio</a></li>
		  <li><a href="../2005-06/2005-diapos.htm">Projets diapos</a></li>
		  <li><a href="../2005-06/2005-dossiers.htm">Projets dossiers</a></li>
		  <li><a href="../2005-06/2005-sites.htm">Sites internet</a></li>
		  <li><a href="../2005-06/2005-reactions.htm">R&eacute;actions d'&eacute;l&egrave;ves</a></li>
		</ul>
       </dd>
	  <dt onclick="javascript:montre('smenu4');"><a href="../projets-2004-05.htm">Ann&eacute;e 2004-2005</a></dt>
	   <dd id="smenu4">
		 <ul><li><a href="../2004-05/2004-videos.htm">Projets videos</a></li>
		  <li><a href="../2004-05/2004-audio.htm">Projets audio</a></li>
		  <li><a href="../2004-05/2004-diapos.htm">Projets diapos</a></li>
		  <li><a href="../2004-05/2004-dossiers.htm">Projets dossiers</a></li>
		  <li><a href="../2004-05/2004-sites.htm">Sites internet</a></li>
		  <li><a href="../2004-05/2004-reactions.htm">R&eacute;actions d'&eacute;l&egrave;ves</a></li>
		 </ul>
       </dd>
</dl>


Mon CSS au cas où :
dl, dt, dd, ul, li {
margin:0;
padding:0;
list-style-type:none;
}
#menu {
	position:absolute;
	padding:12px 0 0 22px;
	text-align:left;
	list-style:none;
	width:120px;
	float:left;
	line-height:1em;
}
dl#menu {
width:120px;
}
dl#menu dt {
cursor:pointer;
margin:1px 0;;
height:22px;
line-height:1.5em;
text-align:center;
font-weight:bold;
border:1px solid gray;
}
dl#menu dd {
border:1px solid #756a67;
}
dl#menu li {
text-align:center;
background:#352823;
line-height:1.5em;
}
dl#menu li a, dl#menu dt a {
color:#ffffff;
text-decoration:none;
display:block;
border:0 none;
height:100%;
}

dl#menu dt a:hover {
color:#5f78ac;
}
dl#menu li a:hover {
color:#ffffff;
background:#5f78ac;
}


Voili, je comprends pas, d'autant plus que le menu se referme en cliquant 2 fois de suite sur les titres (navigation de niveau 1)...? Je crois que j'ai besoin de vos lumières. Smiley lol Merci à vous.
Modifié par sevblue (23 May 2007 - 21:21)
En enlevant les liens des titres entre balises <dt>, le menu peut se fermer mais dès qu'il y a un lien clicable (donc entre les balises <li>) alors le menu reste grand ouvert.
L'exemple donné par Raphaël ne comporte aucun lien, et rien n'indique dans le JS que les menus non concernés doivent rester fermés.

Avez-vous déjà testé ce menu dynamique avec des liens et si oui cela fonctionne-t-il correctement ?
Merci de votre aide...

(je commence à m'arracher les cheveux ! Smiley biggol Smiley lol )
Ah ben voilà ! Un conflit 'onload' avec le cacaboudin 
<body onLoad="MM_preloadImages etc
installé par Dreamweaver pour une toute petite flèche qui se sert à rien (mais change de couleur au passage de la souris, ouahou, bon des fois les graphistes ont des demandes... Smiley lol ), qui n'a rien à voir avec mon menu (qui lui sert à quelque chose Smiley cligne ), donc paf je supprime la fonction 'onload' associée au preloadImages, je ne vais pas perdre grand chose non ?
Résolu donc ! (toute seule comme une chef. Smiley lol )
Sujet clos
Aller à