Ajout d'un 'setTimeout' sur menu déroulant

Version imprimable

Bonsoir bonsoir,

Je voudrais ajouter une fonction de timeout sur le menu horizontal1 de la galerie CSS de developpez.net.
Le timeout devra permettre de garder le menu déroulé 1 ou 2s avant de se fermer.

Je pense qu'il faut ajouter un setTimeout dans le javascipt qui suit mais j'arrive pas a utiliser cette fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
//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';
		}
 
	}
}

Merci d'avance de votre aide

Une idée (non testé)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
	  //on va ajouter une propriété à l'élément à masquer
	  // et on va appeler la méthode de manière récursive
    if(!d.timeoutid) {
      // 1er appel : on affecte la propriété
      // et on fait le timeout (ici 2 seconde)
      d.timeoutid = window.setTimeout("montre('" + id + "', false)", 2000);
      // puis on sort
      return;
    } else {
      // second appel, c'est en principe l'appel du setTimeout, 2s plus tard
      //  on initialise la propriété pour les affichage ultérieur
      d.timeoutid = null;
    }
    // on continue le traitement qui va masquer le menu
		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';
		}
 
	}
}

19/09/2007, 21h52
donut

Merci,

Ca marche pas mal sauf que le timer se déclenche lorsque je déroulle le menu et non pas lorsque je le quitte. Du coup, si je laisse le curseur sur le menu déroulé, il disparait quand même....

Citation:

Ca marche pas mal sauf que le timer se déclenche lorsque je déroulle le menu et non pas lorsque je le quitte. Du coup, si je laisse le curseur sur le menu déroulé, il disparait quand même....

Ok je vois, mais c'est un chouilla plus compliqué

Tu dois avoir dans le menu un appel de la fonction, sur un évènement onmouseover ou onclick, qui affiche le bloc menu.
Il faut donc que tu ajoutes dans le menu un evenement onmouseout, qui lui va cacher le menu après un timeout.
je fait une légère modification du code.
l'ouverture du menu ne change pas
par contre pour le fermture avec un timeout il faut ajouté le onmouseout.
Repere dans le menu le onclick / onmouseover, fait le même appel, en ajoutant un 3emme paramétré: TRUE (c'est ce 3emme param qui indique le différé)
ex
Code:

1 2 <div onmouseover="montre(quelquechoe, true)" onmouseout="montre(quelquechoe, false, true)">
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 function montre(id,affiche, differe) { var d = document.getElementById(id); //si on quitte un élément du menu if (d && !affiche) { //on va ajouter une propriété à l'élément à masquer // et on va appeler la méthode de manière récursive if(!d.timeoutid && differe) { // 1er appel : on affecte la propriété // et on fait le timeout (ici 2 seconde) d.timeoutid = window.setTimeout("montre('" + id + "', false)", 2000); // puis on sort return; } else { // second appel, c'est en principe l'appel du setTimeout, 2s plus tard // on initialise la propriété pour les affichage ultérieur d.timeoutid = null; } // on continue le traitement qui va masquer le menu 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'; } } }
en espérant que j'ai été suffisamment claire

Il suffit de changer très legement la fonction montre() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
//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) 
	{
		var cache = function() {
			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';
			}
		};
		windows.setTimeout(cache, 1000);
	}
	//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';
		}
 
	}
}

Normalement, a coup de closures, ça devrait marcher comme ça. Sinon, il faut créer une fonction cache avec tous les paramètres et lui passer ces paramètres.

Super Cdenis :king:
Il manquait juste un clearTimeout à l'affichage.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		var cache = function() {
			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';
			}
		};
		d.timeoutid = window.setTimeout(cache, 1000);
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{
		clearTimeout(d.timeoutid);
		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';
		}
 
	}
}

Merci à tous les deux de votre aide.