Menu déroulant (onclick) qui se replie (onmouseout) trop vite

Bonjour à tous,

Ma requête fait référence au post de ds-network situé ici (menu déroulant avec effet tiroir très joli).

Je souhaite remplacer l'évênement onmouseover par l'évênement onclick pour le dépliage du menu, et garder l'évênement onmouseout pour le repliage du menu.

dls[*i].onclick = drawerMenu.triggerShow;
dls[*i].onmouseout = drawerMenu.triggerHide;

(les étoiles, c'est pour éviter la mise en italique =) )

Le problème, c'est qu'après avoir cliqué sur une rubrique, dès qu'on place le curseur hors de la zone du titre de la rubrique (donc quand on veut cliquer sur un des liens du menu déplié), le menu se replie.

Exemple ici : http://**www.captain*aruto.com/tests/test_menu_dyn.html (enlever les astérisques)

Il faudrait que l'évênement onmouseout ne soit lancé seulement si l'on quitte la zone du menu déplié, et pas le titre de la rubrique.

Je ne sais pratiquement rien faire en javascript, alors pour que je m'y retrouve dans une classe.... >_<

Une idée ?

ps : Question accessibilité, comment gérer la navigation des visiteurs n'acceptant pas javascript ?
Modifié par Elvellon (06 Aug 2006 - 11:54)

Salut, remplace ceci :

triggerHide : function()
	{
		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.hide('+this.targetElement+')', 20);
	}

par ça :

triggerHide : function(event)
	{
		var e = typeof(event) != 'undefined' ? event.relatedTarget : window.event.toElement;
		if(e != null)
		{
			while(e.nodeName != 'HTML')
			{
				e = e.parentNode;
				if(e == this) return;
			}
		}
		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.hide('+this.targetElement+')', 20);
	}

EDIT : Et pour les visiteurs n'ayant pas activé javascript ou dont le navigateur ne supporte pas javascript, le menu s'affichera déplié.

Tu peux éventuellement créer une classe css dédiée au menu reconstruit par javascript en ajoutant la ligne :

dls[*i].className = 'une_classe_pour_le_menu_js';
dls[*i].onclick = drawerMenu.triggerShow;
dls[*i].onmouseout = drawerMenu.triggerHide;

Comme ça tu écris ton css pour que la classe .menu affiche le menu convenablement pour ceux qui n'ont pas js et tu crées un classe dédiée au menu ( .une_classe_pour_le_menu_js ) tel qu'il s'affichera une fois modifié par le js.

Ma façon d'expliquer est probablement un peu brouillonne par contre
Modifié par ds-network (14 Jun 2006 - 20:56)

Génial, un grand merci c'est impeccable.

Et sinon pour l'accessibilité avec les visiteurs n'acceptant pas javascript (ou ceux navigant avec des browsers dépassés) ?

Et si le script ne s'exécute pas que ce passe-t-il ? Les liens des rubriques seront-ils accessibles ?

Merci pour tes réponses

Ben le menu sera tel qu'il est lorsque tu n'exécutes pas drawerMenu.construct()

Sinon comme je l'ai écris plus haut lors d'une édition de mon message, tu peux très bien écrire une classe css dédiée à ceux qui supportent javascript et tu appliques cette classe lors de l'exécution de drawerMenu.construct() et donc par défaut ( sans javascript ) la classe .menu serait appliquée et si javascript il y a tu appliques l'autre classe ( voir plus haut pour le code exact : dls[*i].className = 'classe_ceux_qui_supportent_javascript'; )
Modifié par ds-network (14 Jun 2006 - 22:53)

Excuse moi je n'avais pas vu ton édit.
Merci beaucoup, je m'y attelle de ce pas

Ouaip j'avais compris ça

Voilà j'ai adapté ce script au menu de la prochaine version de mon site, et j'ai mis un <div> ayant une petite image en background juste sous chaque liste <dl>. Sous IE c'est parfaitement fluide, mais pas sous Firefox : le repliage est saccadé et la liste et l'image se désolidarisent : un léger espace se crée entre eux...

Vous pouvez le constater ici (sous Firefox bien sûr) : http://**www.captain*aruto.com/menu-dyn.php.

Peut-on y remédier ?
Modifié par Elvellon (06 Aug 2006 - 11:55)

Elvellon a écrit :

dls[*i].onclick = drawerMenu.triggerShow;
dls[*i].onmouseout = drawerMenu.triggerHide;

(les étoiles, c'est pour éviter la mise en italique =) )

Au plaisir

yop yop ^^

une p'tite question de noob en js
si on souhaite ouvrir ce genre de menu horizontalement et non verticlalement, où doit on indiquer ceci dans le fichier .js ?

Merkii
Flo

please !!

quelqu'un peut m'indiquer comment ouvrir ce menu mais horizontalement

petit up