Discussion :

[donut]

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 :

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

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

[Cpas2latarte]

Une idée (non testé)

Code :

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

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

[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....

[Cpas2latarte]

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 :

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

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

Code :

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

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

[denisC]

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

Code :

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

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.

[donut]

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

Code :

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

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.