Menu déroulant Horizontale plusieurs contraintes ....

[gobelin]

Bonjour,

J'ai réalisé un menu suite au tuto >>ICI<< et je me trouve confronter par plusieurs p'tit problèmes qui sont :

1) Accés des sousMenu sous IE6 ( dès que je souhaite accéder au sous menu, il se referme aussitôt).

- Peut-on ajouter un delais pour la fermeture des sousmenus losque le curseur de la sourie les quittes ? a voir dans le js je pense avec un delay: 700ms

3) Et la serise pour le gâteau, j'aimerai que le menu soit par dessus ma page, mais lorsque les sous rubrique s'ouvre cela se décale dans ma page XHTMl CSS.

4) Comment faire lorsque le titre du sous menu et long et donc occupe 2 lignes, si je déclare une hauteur fixe dans le "#menu li" la seconde ligne viens par dessus la première du dexieme sousMenu ? Cel fonctionne bien sous IE6, mais pas sous IE7, FireFox 1.5.0.9, Opéra 9.10

J'ai trouvé comment pouvoir faire que ma cellule du menu s'adapte au titre si il est trop long et donc se place sur 2 ligne, j'utilise un "height: 100%;" mais j'aimerai savoir si on peux spécifier un hauteur minimun de 18px par exemple, comment faire ?

le HTML :

<div id="menu">
	<dl>			
		<dt onmouseover="java script:montre('smenu1');">Menu 1;</dt>
			<dd id="smenu1" onmouseover="java script:montre('smenu1');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
					<li><a href="http://www.monSite.com">sousMenu 3</a></li>
					<li><a href="http://www.monSite.com">sousMenu 4</a></li>
					<li><a href="http://www.monSite.com">sousMenu 5</a></li>
					<li><a href="http://www.monSite.com">sousMenu 6</a></li>
					<li><a href="http://www.monSite.com">sousMenu 7</a></li>
					<li><a href="http://www.monSite.com">sousMenu 8a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu2');">menu 2</dt>
			<dd id="smenu2" onmouseover="java script:montre('smenu2');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
					<li><a href="http://www.monSite.com">sousMenu 3</a></li>
					<li><a href="http://www.monSite.com">sousMenu 4</a></li>
					<li><a href="http://www.monSite.com">sousMenu 5</a></li>
					<li><a href="http://www.monSite.com">sousMenu 6</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu3');">menu 3</dt>
			<dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>

	<dl>	
		<dt onmouseover="java script:montre('smenu4');">menu 4</dt>

			<dd id="smenu4" onmouseover="java script:montre('smenu4');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu5');">menu 5</dt>

			<dd id="smenu5" onmouseover="java script:montre('smenu5');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu6');">menu 6</dt>
			<dd id="smenu6" onmouseover="java script:montre('smenu6');" onmouseout="java script:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>
</div>

le css :

/* CSS Document menu index */

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: relative; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 118px;
}
#menu dt {
cursor: pointer;
text-align: left;
height: 20px;
line-height: 20px;
padding-left: 20px;
font-family: Arial;
font-size:11px;
color: #FFFFFF;
background-image: url(../menu_Bg.jpg);
/*background: #2F406C;*/
border: 1px solid #E6E6E6;
margin: 1px;
}
#menu dd {
display: none;
background-color: #2F406C;
}
#menu li {
text-align: left;
background: #fff;
border-top: 1px solid #E6E6E6;
height: 16px; /* hauteur des sousMenus */
}
#menu li a, #menu dt a {
font-family: Arial;
font-size:11px;
color: #FFFFFF;
background-color: #2F406C;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
padding-left: 5px;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #990101;
}
#site {
position: relative;
z-index: 101;
top : 70px;
left : 10px;
color: #FFFFFF;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

Le js :

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';}
}

Merci pour votre aide !!!

[Kent]

3) Et la serise pour le gâteau, j'aimerai que le menu soit par dessus ma page, mais lorsque les sous rubrique s'ouvre cela se décale dans ma page XHTMl CSS.

Tu as inserer tout ton menu dans un div je suppose. Pourquo ne pas essayer de le mettre en absolu et de le positionné via top et left je ne pense pas qu'il influera sur le selementsde la page vu qu'il "sortira du flux".

Position:absolute;

top:320px;

right:500px;

Par exemple...

[gobelin]

Cela n'est pas possible pour la simple et bonne raison que mon site est centré et donc je ne connais pas la taille d'écran de l'internaute et aussi pour que le menu suive la taille de la fenêtre du navigateur quand celle-ci n'est pas en plein écran, donc mettre mon menu en absolute n'est pas la bonne solution ( j'ai déjà essayé)

Merci de ton aide !!!

Modifié 6 Février 2007 par captain_torche