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

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

tayoze

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité