18041 sujets

Questions générales et questions de débutants

Etrange caprice du menu horizontal sous IE6

Bonjour à tous,

Je viens enfin m'inscrire sur le forum après l'avoir fréquenté des années et souvent trouvé réponse à des questions que d'autres s'étaient posés Smiley smile

Mais là, je sèche, je cale, je bloque. Une journée entière à chercher la cause possible d'un comportement curieux... sous IE6 uniquement !

Voilà l'histoire :
J'ai utilisé le désormais célèbre menu de Raphael -Un menu déroulant en CSS et XHTML (horizontal et vertical)- qui fonctionne comme un charme avec FireFox ou IE7.
Mais sous IE6, le menu disparait pendant le survol du menu. Mais pas n'importe où ! Seulement au-dessus du mot "Restauration" dans le dernier menu, à droite.
Evidemment, le code est tout à fait propre, sans aucune excentricité, et il n'y a rien de spécial à cet endroit là.

J'ai essayé absolument tout ce qui me passait par la tête sans aucun succès, à tel point que je sens que je vais la perdre, la tête !

Quelqu'un aura t-il une idée ?



<!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>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 0; i<=30; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-variant:small-caps;
}
#menu {
	position: absolute;  placement du menu, à modifier selon vos besoins
	top: 0;
	left: 0;
	z-index:2;
	width: 100%;
}
#menu dl {
float: left;
width: 125px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-image: url(images/bg_menu.gif);
}
#menu dd {
	display: none;
	border: 0px solid gray;
	margin: 5px;
}
#menu li {
	text-align: center;
	background: #d6c482;
	list-style-position: outside;
	list-style-type: disc;

}
#menu li a, #menu dt a {
color: #663300;
text-decoration: none;
display: block;
height: 100%;
border: none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #FFFFCC;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
}
-->
</style>

</head>

<body>
    
 


  	<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre('smenu1');">Mairie</dt>
			<dd id="smenu1"  onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul >
				<li ><a href="elus.htm" >Nos élus</a></li>
				<li ><a href="jumelage.htm" >Jumelage</a></li>
				<li ><a href="infos.htm">Informations</a></li>
				<li><a href="actes.htm" >Actes civils en ligne</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre();"><a href="ecoles.htm">Ecoles</a></dt>
	</dl>	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Vie locale</dt>
		<dd id="smenu2">
				<ul>
					<li><a href="associations.htm">Liste des associations</a></li>
					<li><a href="agriculture.htm">Agriculture</a></li>
					<li><a href="commerce.htm">Commerce et artisanat</a></li>
				</ul>
	    </dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Tourisme</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="festivites.htm">Festivités</a></li>
					<li><a href="guide.htm">Guide pratique</a></li>
					<li><a href="loisirs.htm">Loisirs sportifs</a></li>
					<li><a href="hebergement.htm">Hébergement</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Patrimoine</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="prehistoire.htm">De la préhistoire à nos jours</a></li>
					<li><a href="citedubarrage.htm">Historique de la cité du barrage</a></li>
					<li><a href="restauration.htm">Restauration du vieux bourg</a></li>
					<li><a href="chateau.htm">Le château et son histoire</a></li>
					<li><a href="patrimoine.htm">Découverte du patrimoine</a></li>					
					<li><a href="cadastrenapoleonien.htm">Cadastre napoléonien</a></li>
					<li><a href="tableaux.htm">Tableaux</a></li>
				</ul>
			</dd>
	</dl>
  	</div>
  </div>

</body>
</html>
Hé bien écoutez, la nuit porte conseil Smiley smile
Je me suis résolu à virer le onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');" pour chaque <dd>
Le résultat est que les menus restent déroulés tant que l'on n'a pas cliqué sur un lien.

L'astuce pour qu'un menu ne reste pas déroulé tout le temps est d'ajouter à la suite du dernier lien, en bas de chaque liste de menu, une petite image, genre 3 pixels de haut sur la largeur de la liste, associée à onmouseover="javascript:montre('');
Cette dernière ligne ressemble donc à ça :

<li><a href="lien.htm">Le Lien<img src="images/menu_closer.gif" width="115" height="3" border="0" onmouseover="javascript:montre('');" /></a></li>


Ainsi, si l'utilisateur ne clique pas sur un lien, mais fait glisser sa souris plus bas que le menu, il le ferme quand même.

Cool, non ?
Sujet clos
Aller à