18041 sujets

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

Tuto menu déroulant en CSS et XHTML : pb passage sous objet SELECT

Bonjour,

Je souhaite utiliser le menu horizontal proposé dans le tutorial "menu déroulant en CSS et XHTML" pour mon site.
Le probleme est que si un <select> se trouve sous ce menu, les sous-menus se deroulent sous le select et non par dessus.
J'ai vaguement lu qu'une solution serait d'utiliser des iframes mais je ne suis pas assez calé pour mettre ca en place.
Si qqun connait la solution a mon pb, merci bcp de m'aider.

Cdt

pierref
Pour info et exemple

fichier html :


<html>
<head>
<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>
<link href="./menu.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>

	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>

					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>

					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	

</div>
<br>
<br>
<br>
<div align="center">
	<select>
		<option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
		<option>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
		<option>cccccccccccccccccccccccccccccccccccccccc</option>
		<option>dddddddddddddddddddddddddddddddddddddddd</option>
	</select>
</div>
</html>


Fichier css :


body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:1;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
bonjour,
c'est un bug bien connu de IE5 et IE6, j'espère que cela a été résolu avec IE7.
Je te propose de modifier le script comme suit :
<script type="text/javascript">
<!--
window.onload=montre;

// bug ie5 & ie6 corrigé : cache les <select> quand le menu est visible
function voirSelect(v){
var elem=document.getElementsByTagName('select');
if(!window.Event){for(i=0;i<elem.length;i++)elem[i ].style.visibility=v;}
}


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';voirSelect('visible')}
	}
if (d) {d.style.display='block';voirSelect('hidden')}
}
//-->
</script>

un exemple
Modifié par chmel (07 Dec 2006 - 23:44)
Sujet clos
Aller à