Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · Salon spécifique aux Tutoriels et articles Alsacréations · Etrange caprice du menu horizontal sous IE6
Rechercher dans le sujet :
Auteur
EmmanuelA7
# 28 Apr 2008 - 21:21:09
Citer
2 Posts
 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 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>
^
EmmanuelA7
# 29 Apr 2008 - 08:32:04
Citer
2 Posts
 Hé bien écoutez, la nuit porte conseil 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 ?
^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta © dew
Contacter l'administrateur - 22.1 ms - Charte