[résolu]Menu déroulant horizontal - délai pour enlever l'affichage.

Bonjour, j'ai fais ce menu en HTML, CSS + Javascript :
menu déroulant horizontal
(inspiré de celui du tutorial d'alsacrétions)

Le seul petit problème que j'ai actuellement est qu'en voulant pointer vers un sous-menu d'une rubrique, on ne peux passer brievement sur un autre lien du menu, sinon les sous menu de ce lien s'affichent et masquent donc ceux du premier. Il faut donc d'abord pointer sur la rubrique puis descendre la souris et ensuite aller à droite ou à gauche pour y acceder. On ne peux pas y aller en diagonale (comme c'est le plus intuitif et plus confortable) car on croise alors d'autres liens. Je voudrais donc que les sous-menus ne s'affichent pas si l'on ne passe très brienvement sur une sous rubrique.

Je cherchais donc une fonction Javascript qui me permette de faire cela : si l'on enlève la souris de la zone qui provoque l'apparation des sous-menus, la disparition de ces derniers ne se fait pas immédiatement mais après un temps d'environ 1 seconde (et de même que l'apparition de ceux ci ne se fait que si l'on reste plus d'une seconde sur le lien).

Existe t-il une telle fonction ?

merci d'avance.
Modifié par mathmax (03 Dec 2005 - 19:50)

Bonjour,
sans aller jusqu'à une temporisation, j'ai procédé autrement en créant une class dynamique.Est-ce que ça te convient car je n'ai pas bien compris ta question ?

Non malheureusement, car ton menu est comme le mien (même si les sous menu ne disparaissent pas) : Quand on survole brievement un lien du menu, les sous menu correspondant s'affichent. Je voudrais éviter cela afin que si on souhaite acceder à un sous-menu, on puisse passer brievement par dessus les autres liens du menu sans que leurs sous-menus ne s'affichent.

En clair je voudrais arriver à faire un menu qui régisse comme celui de macromedia sauf qu'au lieu de le faire en Flasch, je souhaiterais le faire en Javascript. Pour bien comprendre ce que je veux : pointer sur la rubrique produit, les sous menus s'affichent. Essayer alors d'aller directement (en ligne droite) vers le sous menu "Dreamweaver". Vous passer donc brievement par la rubrique "Galerie", mais ses sous-menu ne s'affichent pas car vous ne passez que brievement sur cette rubrique... c'est cela que je voudrais faire.

Je pensais temporiser par un bout de code comme ceci :

 
<SCRIPT>
Stamp = new Date();
var Time1 = Stamp.getSeconds();
var Time2 = Stamp.getSeconds();
while (Time2 -Time1 < 2)
{Time2 = Stamp.getSeconds();}
//afficher les sous menus
d.style.display='block';
</SCRIPT>

Malheuresement ça ne marche pas .
Savez-vous pourquoi ? Avez-vous une autre idée ?

Bonjour,

Je ferais plutôt un truc du style :

Exemple en semi-pseudo-code :

var timeout = null;
function onmouseoverSurLeMenu () {
timeout = setTimeout("afficherLESousMenu();", 1000);
}
function onmouseOutSurLeMenu () {
if (timeout) clearTimeout(timeout);
}
function afficherSousMenu () {
// affichage du menu ......
}

Bonjour,
Amener une temporisation au mouseout n'est pas compliquée car l'évènement a disparu quand l'action est réalisée, mais amener un retard au mouseover alors que l'évènement est toujours actif, je n'y arrive pas.
QuentinC, j'attends de voir comment tu fait

Merci c'est déjà ça.

Je débute en Javascript et j'ai essayé de comprendre ton code mais il y a un truc qu'y m'échappe :

dynMenu = function(idMenu,delai) 
{
	planq=0;
	mu=document.getElementById(idMenu);
	dls = mu.getElementsByTagName("dl");
	dds = mu.getElementsByTagName("dd");
	if(dds)
	{
		for(var i=0;i<dls.length;i++) 
		{
			dls[i].onmouseover=dls[i].onfocus=function()
			{
				clearTimeout(planq);
				smenu=this.getElementsByTagName("dd")[0]
				if(smenu)
				{
					cachetout();
					smenu.style.display="block";
				}
			}
			dls[i].onmouseout=function()
			{
				if(delai) 
				{
					planq=setTimeout('cachetout()',delai);
				}
			}
		}
		alert(delai);
	}
	document.onclick=cachetout;
}

Pourquoi if(dds), if(smenu) et if(delai) sont-elles des conditions ? Pour moi ce sont des variables et je ne vois pas comment on peut déterminer un vrai ou faux... je ne vois pas d'égalité la dedans. Peux-tu m'éclairer ?
[/i][/i][/i]

L'évènement ne passe pas, c'est ça le problème ?

Non ce menu marche bien, mais je ne comprends pas le code. Plus précisement, je ne comprends pas comment les événements "dds", "smenu" et "delai" peuvent être vrais ou faux et donc pourquoi on met if(dds), if(smenu),...

QuentinC a écrit :
L'évènement ne passe pas, c'est ça le problème ?

Non, c'est faire un retard sur l'action du "onmouseover". Je ne métrise pas bien setTimeout avec des paramètres et je crois qu'il faudra passer par un timeout variable avec des tableaux et ça me dépasse pour l'instant, mais il me semble que tu te débrouilles mieux que moi et je pensait que tu allais nous trouver ça facilement. Encore faut-il avoir le temps

mathmax a écrit :
comment les événements "dds", "smenu" et "delai" peuvent être vrais ou faux et donc pourquoi on met if(dds), if(smenu),... ?

Cela fait partie des raccourcis possibles du javascripts :
if(dds) vérifie la présence de balise(s) "DD" avant de continuer, sinon erreur voir plantage.
C'est équivalent à if(dds == true) ou if (dds != 0) - constaté sur tests -. Ce n'est pas toujours logique. Je suis en train de me mettre au PHP que je trouve plus évident et plus facile à comprendre : une $variable ne peut pas être confondue avec autre chose...


Modifié par chmel (30 Nov 2005 - 23:57)

Pe problème du passage de paramètres à un timeout, est qu'on ne peut passer que des chaînes de caractères ou des types pouvant se convertir facilement en chaînes.
Passer un objet est donc pratiquement impossible avec la syntaxe traditionnelle :
setTimeout("fonction(" + arg1 + ", " + arg2 + ", " + arg3 + ");", délai);

Mais une évolution du langage permet déjà une nouvelle syntaxe, malheureusement uniquement compatible firefox, ou du moins IE ne permet pas le passage de paramètres supplémentaires :
setTimeout(function, délai, arg1, arg2, arg3);
Les trois arguments sont passés automatiquement à la fonction fournie en premier paramètre, en théorie.

Bonjour,
Tu n'aura plus à te gratter la tête.
Ce n'était tout compte fait pas si difficile.
J'ai repris l'éxemple que tu as cité. J'ai ajouté une fonction montre() pour éviter les paramètres . Il y a 2 temporisations différentes : delai_in et delai_out utilisant le mème compteur : timeout.
Je vais ajouter ces temporisations optionnelles au menu avec class dynamique que je suis en train de préparer dont les avantages sont :
- de séparer complètement js et css,
- permettre d'activer simplement le menu de la page en cours, automatisé par un language serveur
- aller plus loin dans le paramétrage du menu en css
- ... test

<!--
window.onload=function(){dynMenu("menu",500,1500)}

//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="menu.css"

dynMenu = function(idMenu,delai_in,delai_out) {
timeout=0;
Menu=document.getElementById(idMenu);
dls = Menu.getElementsByTagName("dl");
dds = Menu.getElementsByTagName("dd");

if(dds){
  for(var i=0;i<dls.length;i++) {
    dls[i].onmouseover=function(){
			clearTimeout(timeout);
			smenu=this.getElementsByTagName("dd")[0];
			timeout=setTimeout("montre()",delai_in)
    	}
   }
  }
document.onclick=cachetout;
Menu.onmouseout=function(){
	clearTimeout(timeout);
	timeout=setTimeout('cachetout()',delai_out);
	}

}
function cachetout(){for(var j=0;j<dds.length;j++)dds[j].style.display="none";}
function montre(){cachetout();smenu.style.display="block"}
//-->

[/i]
Modifié par chmel (01 Dec 2005 - 23:26)

Je ne vois pas de temporisation sur l'action du "onmouseover" dans ton menu. Il y a des paramètres à changer dans le javascript ?

Merci pour tes explications sur les conditions f(dds), if(smenu),...

mathmax a écrit :
Je ne vois pas de temporisation sur l'action du "onmouseover" dans ton menu. Il y a des paramètres à changer dans le javascript ?

Merci pour tes explications sur les conditions f(dds), if(smenu),...

Excuse-moi, je suis un peu brouillon.
Je ne l'ai pas mis à jour sur 9online, mais le script que j'ai donné plus haut est le bon.
Par contre, j'ai mis à jour celui-la et comme je suis toujours en train de tester des trucs, j'ai mis le script juste après le div qui contient le menu. C'est autorisé et on évite ainsi le window.onload qui pose problème.
Modifié par chmel (02 Dec 2005 - 16:40)

Merci beaucoup chmel, ton code marche parfaitement ! C'est absolument génial ! Je viens juste de découvrir le javascript et sa me passionne déjà de voir toutes les nouvelles possibilités que ça offre.
J'ai adapté ton code à mon menu en y ajoutant 2 petites modifications :
- j'ai ajouté un cachetout(); dans window.onload pour qu'au début les sous-menus soient masqués ;
- j'ai fais en sorte que le retard sur l'action du "onmouseover" ne se fasse que si l'on est sur le menu. De sorte que si l'on a pas pointé sur le menu depuis un moment, il n'y ai pas de retard lorsqu'on pointe à nouveau dessus.

Tu peux le voir ici si ça t'interesse.

*edit : je me rends compte les sous-menus n'apparaissent pas sout IE (pas de comportement dynamique) sais tu à quoi cela peut être dû ?
Modifié par mathmax (04 Dec 2005 - 02:21)