[Résolu]Un onmouseout dans un menu CSS

[mofo]

Bonjour,

 

J'aimerai mettre un mouseout lorsque l'on sort d'une des entrées du menu qui pemet de refermer le menu. Voilà toutes mes infos :

 

Ce qui se passe : l'action onmouseout fonction jusqu'au premier LI, après le menu se ferme en sortant du premier LI ... bizarre non ?

 

Exemple sur cette page : http://www.mofland.com/test_menu.htm.

 

LE CODE HTML

<div id="menu" style="float:left;">	
<dl>
		<dt onmouseover="java script:montre('smenu1');"><a href="URL" title="Intitulé">Intitulé</a></dt>
		<dd id="smenu1" style="display:none;">
			<ul onmouseout="java script:montre('');">
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
			</ul>
		</dd>
</dl>	  
<dl>
		<dt onmouseover="java script:montre('smenu2');"><a href="URL" title="Intitulé">Intitulé</a></dt>
		<dd id="smenu2" style="display:none;">
			<ul onmouseout="java script:montre('');">
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
				<li><a href="URL" title="Intitulé">Intitulé</a></li>
			</ul>
		</dd>
</dl>			
</div>

 

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

 

LES STYLES

/* CSS issu des tutoriels http://css.alsacreations.com */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
bottom: 0;
left: 0;
#z-index:100;
}
#menu dl {
float: left;
_width: 0em;
position: relative;
margin: 0 8px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;

}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:20em;
}
#menu li {
text-align: left;
margin:2px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #eee;
}

 

Merci pour votre aide

Modifié le 8 juin 2007 par mofo

[mushylex]

Vide

Modifié le 6 juin 2022 par mushylex
Vide

[EffiK]

Saltut,

 

As tu essayé de mettre tes fonctions onmouseover / onmouseout dans le tag <DL>

[mofo]

Oui j'ai testé. Si je mets sur le DL, dès que je sors du DT (intitulé niveau 1) ca referme tout ...

 

Je pense qu'il y a un soucis sur mes styles ... mais je vois pas trop !

[mofo]

ok j'ai trouvé comme un grand à partir d'une feuille blanche, j'ai tout refait et je vous laisse mon code final.

 

A noter : compatible IE + FF ^^

 

Exemple : comme d'hab, je vous met un exemple consultable : http://www.mofland.com/newMenuCss.htm

 

++

 

STYLES

/* Menu déroulant dans le footer */

#nav {
position: relative;
bottom: 0;
left: 0;
}
#rub {
color: #000;
position: relative;
float: left;
margin: 0 8px;
}
#nav ul {
position: absolute;
margin: 0;
padding:2px;
bottom:1.1em;
width:20em;
text-align: left;
left: 0px;
background-color: #eee;
border: 1px black solid;
}
#nav li {
margin:0px;
text-align: left;
list-style-type: none;
}
#nav li a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#nav li a:hover {
text-decoration: underline;
}
#rub a:hover {
text-decoration: none;
}
#rub a {
color: #000;
}

 

HTML

<div id="menu" style="float: left;">		
<div id="nav">

			<div id="rub" onmouseover="java script:montre('smenu1');" onmouseout="java script:montre('');">Rubrique 1
				<ul id="smenu1" style="display: none;">
					<li>1.1</li>
					<li>1.2</li>
					<li>1.3</li>
				</ul>
			</div>
</div>
<div id="nav">

			<div id="rub" onmouseover="java script:montre('smenu2');" onmouseout="java script:montre('');">Rubrique 2
				<ul id="smenu2" style="display: none;">
					<li>2.1</li>
					<li>2.2</li>
					<li>2.3</li>
				</ul>
			</div>
</div>
<div id="nav">

			<div id="rub" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');">Rubrique 3
				<ul id="smenu3" style="display: none;">
					<li>3.1</li>
					<li>3.2</li>
					<li>3.3</li>
				</ul>
			</div>
</div>
</div>

 

JAVASRIPT

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

 

Voilà

 

++

 

Mofo

[mushylex]

Vide

Modifié le 6 juin 2022 par mushylex
Vide

[mofo]

EN fait j'ai repris une structure plus simple DIV + UL + LI

Le Css est plus clair (pour moi en tout cas ^^)

Enfin la grosse correction c'est un left:0px; pour que IE ne mette pas le menu qui s'ouvre à droite du titre de la rubrique.

 

Voilou

[mushylex]

Vide

Modifié le 6 juin 2022 par mushylex
Vide