Problème de menu CSS, SetTimeout ?

VaN
Mammouth du PHP | 1107 Messages

20 sept. 2006, 16:46

Re bonjour,

J'ai un menu déroulant en CSS qui marche bien, mais j'aimerais lui rajouter une fonctionnalité :

Lorsqu je quitte une rubrique, j'aimerais que les sous-rubriques disparraissent. Je crois savoir qu'il faut utiliser la fonction SetTimeout de javascript, mais je ne sais pas comment faire.

Comment dois-je modifier ma fonction ?

Merci d'avance

la fonction :

Code : Tout sélectionner

<script type="text/javascript"> <!-- var blnOk=true; var timeout; var delai = 350; var nbmenu = 9; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=9; i++) { if (document.getElementById('smenu'+i)) { document.getElementById('smenu'+i).style.display='none'; } } if (d) { d.style.display='block'; } } //--> </script>
Et l'appel à la fonction, meais qui ne marche pas comme je le voudrai pour le moment :

Code : Tout sélectionner

<dt onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:setTimeout("montre()",1000);"><a href=""><? echo $langage['menu_actu']; ?></a></dt>

VaN
Mammouth du PHP | 1107 Messages

20 sept. 2006, 17:26

Je viens de changer mon

Code : Tout sélectionner

setTimeout("montre()",1000)
en

Code : Tout sélectionner

setTimeout('montre()',1000)
et le Timeout à l'air de marcher, sauf que maintenant, le sous menu des rubriques disparaît meme lorsque je laisse la souris dessus (la fonction se lance quand la souris quitte la rubrique en fait).

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

21 sept. 2006, 12:06

Ton problème n'était pas d'utiliser des apostrophes ou des guillemets, les deux fonctionnent, mais venait de leur imbrication : si tu mets des guillemets dans un attribut onMouseOut="..." qui est déjà déterminé par des guillemets, le navigateur pensera que la chaine est terminée dès qu'il aura atteint la première paire alors que ce n'est pas le cas.

Entre des guillemets, il te faut donc utiliser des apostrophes pour tes chaines, et inversement, entre des apostrophes, il te faut utiliser des guillemets :)

Concernant ton problème maintenant : le 1000 que tu spécifies correspond au temps que va attendre le navigateur avant d'effectuer l'action, exprimé en millisecondes. Ainsi, au bout d'une seconde après que tu ais quitté le menu avec ta souris, quoi qu'il arrive il lancera la fonction, même si tu es revenu sur le menu parent.

Il te faut pour éviter cela arrêter le timeout, ce que tu peux faire avec la fonction clearTimeout() en donnant un nom à ton timer :

Code : Tout sélectionner

var xx = setTimeout('montre', 3000); // lance la fonction montre() dans 3 secondes clearTimeout(xx); // arrête le timer xx, la fonction ne sera pas lancée, quel que soit le temps qui reste