18041 sujets

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

[resolu]Menu deroulant

avec le menu deroulant horizontal je n'arrive pas a avoir les sous menus!

merci de vos réponses

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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" media="screen">
<!-- 
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:100;
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; 
}
-->
</style>

</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" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<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('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<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" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<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>


</body>
</html>


<edit> Pour présenter un code sur le forum, il faut l'encadrer des balises [ code]...[ /code] (sans les espaces) Smiley cligne </edit>
Modifié par milene76 (06 Feb 2007 - 11:33)
Modérateur
Bienvenue milene76 et bonjour ! Smiley ohwell

Un bout de code peut-être ? non ? pas le temps ?
Modifié par koala64 (05 Feb 2007 - 13:39)
désolé mais j'ai eu du mal a ecrire le message car je n'arrivais a me connectée, d'ailleurs j'ai toujours pas trouver!

c'est vrai j'aurais pu rééditer le message, j'ai pas d'excuses.

Je vous demande pardon pour mon impolitesse passagère qui n'est pas coutumier chez moi!!!!!
Modérateur
Ce qui ne va pas, c'est que tu as rajouté un display: none; sur #menu dd alors que c'est le script qui cache les menus normalement... De plus, tu n'as justement pas récupéré ce script donc ça ne peut pas marcher... Smiley smile

PS : Il manque le doctype à ta page. Smiley cligne
Modifié par koala64 (05 Feb 2007 - 15:00)
désolée mais je découvre vraiment.
C'est quoi le doctype????

et a la place de none je dois mettre?

merci d'avance
j'ai rééditer mon premier message avec le nouveau code.
Modérateur
Pour le doctype, je t'invite à lire ce document :

http://pompage.net/pompe/doctype/

Tu dois en choisir un en fonction de tes besoins, le mettre en première position dans ta page (x)html puis rendre cette dernière conforme à celui-ci si ce n'est pas déjà fait. Pour cela, tu peux vérifier à l'aide d'un validateur W3C.

Pour le display: none; situé dans la partie CSS au sein de #menu dd, tu n'as qu'à le supprimer... Il n'y a rien à mettre à la place.

En revanche, tu dois ajouter ce bout de script :
<script type="text/javascript">
<!--
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>
dans l'entête (head) de ton document (x)html.
Modifié par koala64 (05 Feb 2007 - 16:22)
heu désolée je croyais l'avoir mise le résolu!

sinon le menu lui fonctionne bien. Par contre c'est un probleme de mise en page! maintenant!

mais j'ai pris des tuto un peu partout, des exemples ....... et je vois ca cette semaine pour approfondir les choses!

Merci pour ton aide!
Sujet clos
Aller à