18041 sujets

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

[RESOLU] Problème de menu déroulant

Bonjour,

j'ai suivi tout le tutoriel sur le menu vertical suivant :

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Lorsque je l'intègre sur mon site (via la fonction include), j'ai un petit problème. A chaque fois que la page s'ouvre, la partie cachée du menu déroulant s'ouvre entièrement avant de se refermer.

Quelqu'un à t'il une idée du problème ?


Voici le code de mon menu :



<!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" xml:lang="fr" lang="fr">
<head>
<title>TEST</title>
  <META NAME="ROBOTS" CONTENT="ALL">
  <meta name="description" content=""/>
  <meta name="keywords" content=" "/>
  <meta name="author" content="”/>
  <META NAME="Language"CONTENT="FR">
  <meta name="generator" content="WebExpert 6"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css.css" title="css principal avec en-t&#1082;te, menu et pied de page" /><!-- CSS DE BASE -->

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

</style>



<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background:  #b1b2ff;
font: 120% monotype Corsiva;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, &#1072; modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 10em;
}
#menu dt { /* menu tous */
cursor: pointer;
margin: 25px 0;;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
border: 0px solid gray;
background: #b1b2ff;
}
#menu dd {
border: 0px solid gray;
}
#menu li { /* sous-menu */
text-align: center;
background: #b1b2ff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;

}
#menu li a:hover, #menu dt a:hover {
background: #d2d4fe;


</style>
</head>

<body>





	  <div id="gauche">
	  	
			<ul class="menugauche">
			
			
	<script language="javascript" src="menuindex.js"></script>

<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>



		<dl id="menu">


		<dt onclick="javascript:montre();"><a href="#1">1</a></dt>
		<dt onclick="javascript:montre();"><a href="#2">2</a></dt>
		<dt onclick="javascript:montre();"><a href="#3">3</a></dt>
		<dt onclick="javascript:montre('smenu2');"><font color="black"><a href="#">Menu déroulant</a></font></dt>
		<dd id="smenu2"><ul>
		<li><a href="#déroulant1">Déroulant 1</a></li>
        <br/>
		<li><a href="#déroulant2">Déroulant 2</a></li>
        <br/>
		<li><a href="#déroulant3">Déroulant 3</a></li>
		<br/>
		<li><a href="#déroulant4">Déourlant 4</a></li>
		</ul></dd>		
		<dt onclick="javascript:montre();"><a href="#déroulant5">Déroulant 5</a></dt>
		<dt onclick="javascript:montre();"><a href="#testa">testa</a></dt>
		<dt onclick="javascript:montre();"><a href="##testx">Testx</a></dt>
		<dt onclick="javascript:montre();"><a href="##testy">Testy</a></dt>
		<dt onclick="javascript:montre();"><a href="##testz">Testz</a></dt>
			
  </dl>
			
	  </div>
	  
	

</body>
</html>



et le code de la page




<!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" xml:lang="fr" lang="fr">
<head>
<title>TEST</title>
  <META NAME="ROBOTS" CONTENT="ALL">
  <meta name="description" content=""/>
  <meta name="keywords" content=" "/>
  <meta name="author" content="”/>
  <META NAME="Language"CONTENT="FR">
  <meta name="generator" content="WebExpert 6"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css.css" title="css principal avec en-t&#1082;te, menu et pied de page" /><!-- CSS DE BASE -->

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
margin-left:195px;
height: 0px;
background-color: #b1b2ff;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#b1b2ff;
}
#centre {
background-color:#b1b2ff;
margin-left: 200px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
margin-left:195px;
height: 70px;
background-color: #b1b2ff;
}

.menu {
position: absolute;
left:0;
width: 50px;
height: 300px;
background-color:#b1b2ff;
}
.frame {
margin-left: 200px;
width: auto;
height: 390px;
background-color:#b1b2ff;
overflow: auto;
}
p {margin: 0 0 10px 0;}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
</style>



<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background:  #b1b2ff;
font: 120% monotype Corsiva;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, &#1072; modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 10em;
}
#menu dt { /* menu tous */
cursor: pointer;
margin: 25px 0;;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
border: 0px solid gray;
background: #b1b2ff;
}
#menu dd {
border: 0px solid gray;
}
#menu li { /* sous-menu */
text-align: center;
background: #b1b2ff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;

}
#menu li a:hover, #menu dt a:hover {
background: #d2d4fe;


</style>
</head>

<body>

<div id="conteneur">

	  <div id="header">
	  
</div>

	  <div id="gauche">
	  	
			<?php include ("menu.html");?>
				
	  </div>
	  
	  <div id="centre">
  	  <div style="text-align: center"><img src="../images/logo_definitif_1.jpg" border="0" width="690" height="224" alt=""></div/>
	
	  <div style="text-align: center">  <font face="monotype Corsiva" color="#050000"><font size="5" color="#050000"><b><div style="text-align: center"><font color="#050000"><b><u>Liens</u></b></font></div></b></font>
<br>
	  

</div>

</div>
	  
	 <div id="pied">	
	 
	 </div>
	 	 
</div>

</body></html>

Modifié par vinzu (25 Jan 2007 - 22:29)
Salut.

C'est un comportement voulu de ce menu. Afin de garder les sous-menus accessibles à tous les visiteurs, y compris ceux qui n'ont pas javascript activé ou qui utilisent un lecteur d'écran, les menus sont affichés puis cachés par javascript. On les voit donc pendant un bref instant.

C'est un désagrément mineur, et on ne peut pas faire autrement, à moins de sacrifier l'accessibilité du menu. Dans ce cas (fortement déconseillé), il suffit de donner la proriété "display: none;" à tous les éléments du menu.
Sujet clos
Aller à