Discussion :

[Lili72430]

Salut à tous,
J'aurais besoin de votre aide pour gérer un onmouseout sur un menu déroulant. Je m'explique : j'ai un menu déroulant dont voici une portion de code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<dl>	
  <dt onmouseover="javascript:montre('smenu1');"   onmouseout="javascript:cache('smenu1')";>Métiers</dt>
	<dd id="smenu1">
	  <ul>
	       <li><a href="#">item 1</a></li>
	       <li><a href="#">item 2</a></li>
               <li><a href="#">item 3</a></li>
	  </ul>
        </dd>
</dl>

Quand je fais un rollover sur un item, les sous-menus apparaissent (aucun souci jusque là...). J'ai géré cet événement grâce à une petite fonction javascript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
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';}
}

J'ai essayé de gérer le onmouseout, pour que les sous-menus disparaissent lorsque le curseur n'est pas dessus, mais ma fonction ne marche pas comme je veux :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function cache(id) {
var d = document.getElementById(id);
	for(var i=1;i<=10;i++) {
		if(d){ //ou if(document.getElementById('smenu'+i))
			document.getElementById('smenu'+i).style.display='none';
		}
	}
}

Quand je fais un rollover sur les sous-menus, ils disparaissent !
J'ai fait pas mal d'essais pour corriger ce bug, mais à chaque fois sans succès ! :-(
A l'aiiiiiide !

[MasterOfChakhaL]

Salut et bienvenue à toi sur les forums de developpez.com,

Est-ce que tu as essayé de mettre le code qui doit cacher ton élément sur l'élément dd?
i.e:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<dl>	
  <dt onmouseover="javascript:montre('smenu1');">Métiers</dt>
  <dd id="smenu1" onmouseout="javascript:cache('smenu1');">
    <ul>
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
    </ul>
  </dd>
</dl>

[Lili72430]

Oui, j'ai déjà essayé (même pour la balise ul)... le problème reste le même, sauf pour le 1er item du menu déroulant, où les choses se passent tel que je le voudrai. :-/

[Lili72430]

Je pense avoir trouvé la solution à mon problème ... en mettant onmouseout="javascript:cache('smenu2')";, sur la dernière balise li de chaque ul, ça marche ! :-)

[Lili72430]

Enfin, c'est pas vraiment ce que je voulais... dans ce cas, l'utilisateur est obligé de passer le curseur sur le dernier item pour que le menu disparaisse... pas génial si ces derniers sont nombreux ! :-S
En fait, ce que je voulais au départ, c'est que dès que le curseur n'est plus sur le menu ou les sous-menus, les sous-menus disparaissent...

[Alex35]

en flash ca se fait tres bien

[Lili72430]

Lol ! Je m'en doute mais je dois développer un site en utilisant HTML/CSS...^^

[Auteur]

Menu déroulant horizontal

[Lili72430]

Merci beaucoup Auteur !
J'ai *enfin* résolu mon problème... ouf !
Maintenant mon menu déroulant est impec' et marche sur la plupart des navigateurs récents... trop cool ! En plus, je voulais gérer un clearTimeout, et c'est chose faite !