18041 sujets

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

Menu déroulant horizontal

Bonjour,

J'ai créé le menu déroulant horizontal http://css.alsacreations.com/modelesmenus/hd1.htm
pour mon site. Il est vraiment génial car c'était exactement ce que je cherchais.
Ma question : que doit-on changer dans le code pour que le menu apparaisse toujours sur une ligne même si on redimensionne la fenêtre.
Actuellement, pour une fenêtre plus petite, le menu va sur 2 lignes.

Merci à tous pour votre aide.

Ariane
Donner une dimention fixe au menu (par exemple : #menu {width: 60.5em}).
Seulement, celui qui auras un écran plus petit, devra scroller horizontalement pour tout voir Smiley cligne
Modifié par chmel (05 Oct 2006 - 15:33)
Merci, c'est exactement ce que je voulais.
Par contre, je ne comprends pas exactement la valeur em.
Encore une question...

Les sous-menus ne disparraissent que lorsqu'on va sur un autre menu. Y a-t-il un moyen de les fJe voudrais que les sous-menus disparaissent
excusez-moi, j'ai eu un petit problème...
je continue : y a t il un moyen de les faire disparaitre quand le curseur n'est plus dessus?
Administrateur
Hello Smiley smile

Ari a écrit :
Encore une question...

Les sous-menus ne disparraissent que lorsqu'on va sur un autre menu. Y a-t-il un moyen de les fJe voudrais que les sous-menus disparaissent
Moui, lire le tutoriel jusqu'au bout Smiley cligne

a écrit :
excusez-moi, j'ai eu un petit problème...
je continue : y a t il un moyen de les faire disparaitre quand le curseur n'est plus dessus?
Est-ce la même question ? Pourquoi ne pas avoir édité ton message précédent ?

a écrit :
Par contre, je ne comprends pas exactement la valeur em.
Et hop, toujours commencer par faire un tour dans l'Incontournable FAQ :
http://forum.alsacreations.com/faq/#item14
Modifié par Raphael (06 Oct 2006 - 13:53)
Merci. J'ai fait ce que tu as dit mais ça ne marche pas!
Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylemenu.css" rel="stylesheet" media="screen" type="text/css" />
<title>test</title>

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

<style type="text/css">
<!--

#menu {
font: 12px Arial, Helvetica, sans-serif;
position: absolute;
display: inline;
top: 58px;
left: 161px;
z-index:100;
/*width: 100%;  /*précision pour Opera */
width: 70em;
}
#menu dl {
/*position: absolute;*/
float: left;
width: 168px;

}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
background: #d6e0ee;
border: 1px solid gray;
margin: 1px;
line-height: 17px;

}
#menu dd {
display: none;
border: 1px solid gray;
line-height: 17px;

}
#menu li {
font: 11px Arial, Helvetica, sans-serif;
text-align: center;
background: #fff;
line-height: 17px;
border-bottom: 1px solid lightgrey;

}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
font-weight: bold;
color: #000000;
text-align:left;
}

-->
</style>

</head>
<body>
	<div id="menu">
		<dl>			
			<dt onmouseover="javascript:montre('smenu1');">Les analyses</dt>
				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="a.htm">Dépistage</a></li>
						<li><a href="b.htm">Ethylisme</a></li>
						<li><a href="c.htm">Contrôle</a></li>
						<li><a href="d.htm">Chimique</a></li>
						<li><a href="e.htm">Dosage1</a></li>
						<li><a href="f.htm">Dosage2</a></li>
						<li><a href="g.htm">Autres analyses</a></li>
					</ul>
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre('smenu2');">Comment faire...</dt>
				<dd id="smenu2"  onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="prelevement.html">Prélever une mèche</a></li>
						<li><a href="commande.htm">Commander</a></li>
					</ul>
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre();"><a href="avantages.htm">Avantages</a></dt>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre();"><a href="questions.htm">Questions &amp; R&eacute;ponses</a></dt>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre();"><a href="nous-contacter.htm">Nous contacter</a></dt>
		</dl>
	</div>
  	

</body>
</html>
Sujet clos
Aller à