Menu horizontal déroulant

tayoze · 21 Janvier 2011

Bonjour,

J'ai trouvé ce script pour créer un menu dynamique qui est super et qui fonctionne trés bien.

Je n'arrive pas à modifier le css pour qu'il prenne 100% de la largeur de l'écran. Car je suis dans une société qui ont des postes avec des résolutions différentes.

Quelqu'un aurait une idée?

En vous remerciant de votre aide

Index.html


<!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" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="centrer">


<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">smenu511</a></li>
						<li><a href="#">smenu512</a></li>
						<li><a href="#">smenu513</a></li>

					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">smenu521</a></li>
						<li><a href="#">smenu522</a></li>
						<li><a href="#">smenu523</a></li>

					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">smenu531</a></li>
						<li><a href="#">smenu532</a></li>
						<li><a href="#">smenu533</a></li>

					</ul>
				</li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Menu 4
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
					<ul id="smenu41">
						<li><a href="#">smenu411</a></li>

						<li><a href="#">smenu412</a></li>
						<li><a href="#">smenu413</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
					<ul id="smenu42">
						<li><a href="#">smenu421</a></li>

						<li><a href="#">smenu422</a></li>
						<li><a href="#">smenu423</a></li>
					</ul>
				</li>
				<li><a href="#">smenu43</a></li>
				<li><a href="#">smenu44</a></li>
			</ul>

		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Menu 3
			<ul id="smenu3">
				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">smenu31</a>
					<ul id="smenu31">
						<li><a href="#">smenu311</a></li>
						<li><a href="#">smenu312</a></li>
						<li><a href="#">smenu313</a></li>

					</ul>
				</li>
				<li><a href="#">smenu32</a></li>
				<li><a href="#">smenu33</a></li>
				<li><a href="#">smenu34</a></li>
				<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">smenu35</a>
					<ul id="smenu35">

						<li><a href="#">smenu352</a></li>
						<li><a href="#">smenu353</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">smenu36</a>
					<ul id="smenu36">
						<li><a href="#">smenu361</a></li>

						<li><a href="#">smenu362</a></li>
						<li><a href="#">smenu363</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Menu 2
			<ul id="smenu2">
				<li><a href="#">smenu21</a></li>

				<li><a href="#">smenu22</a></li>
				<li><a href="#">smenu23</a></li>
				<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
					<ul id="smenu24">
						<li><a href="#">smenu241</a></li>
						<li><a href="#">smenu242</a></li>

						<li><a href="#">smenu243</a></li>
					</ul>
				</li>
			</ul>			
		</li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Menu 1
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">smenu11</a>
					<ul id="smenu11">

						<li><a href="#">smenu111</a></li>
						<li><a href="#">smenu112</a></li>
					</ul>
				</li>
				<li><a href="#">smenu12</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
					<ul id="smenu13">

						<li><a href="#">smenu131</a></li>
						<li><a href="#">smenu132</a></li>
						<li><a href="#">smenu133</a></li>
					</ul>
				</li>
			</ul>
		</li>

	</ul>	
</div>	
</div>	
</body>
</html>

menu.js


//au chargement de la page, on appelle la fonction montre()
window.onload=montre;

//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#39f';
			c.firstChild.style.background='#fff';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#39f';
		}
	}
}

Style.css


* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}

body{
font-family:Arial, Helvetica, sans-serif;
}

img {
border:none;
}

a {  
color:#000000;
text-decoration:none;
text-transform:none;
}

/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}

/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}

/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
height:22px;
}

/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}

#menu ul li ul li {
height:100%;
}

#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}

/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}

/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}

/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}

**Ernestine** · 21 Janvier 2011

Salut,

Le menu est constitué d'un ul contenant des li flottants. Pour que le ul s'étende sur 100% pas de problème, mais pour que les li soient répartis équitablement sur toute la largeur, il faudrait leur donner un width fixe correspondant à la largeur divisée par le nombre de li, mais vu que la largeur est variable selon les écrans... c'est impossible.

Tu devrais te contenter de les aligner à gauche, au centre ou à droite.

tayoze · 21 Janvier 2011

Merci pour ta réponse.

J'ai choisi ce menu pour une seule raison, c'est qu'elle me permet de définir l'ouverture à gauche des sous-niveaux de la dernier colonne. :unsure:

Mais je vais encore essayer d'autre modification suite à ta réponse... En attendant d'autre idée :whistling:

Connexion

Menu horizontal déroulant

Sujets conseillés

tayoze

Ernestine

tayoze

Veuillez vous connecter pour commenter

Parcourir

Activité