Forum d'entraide PHPFrance

Bonjour, je suis en train de créer (à partir de scripts par ci par là) un menu en CSS. Il est sur cette page :

http://www.goodgame.fr/includes/menu_new.php

Le problème que je rencontre est le suivant :

Lorsque la souris arrive sur un menu deroulable, le menu se déroule, nickel. Lorsque je bouge la souris vers un autre menu déroulable, le premier disparait, et le deuxieme apparait, nickel. Mais lorsque je suis sur un menu deroulé, et que je bouge ma souris ailleurs que sur un autre menu, le menu ne disparait pas.

J'essaye de créer donc une fonction cacherMenu(), mais je ne sais pas comment faire. J'aimerais egalement, si possible, ajouter un petit délai entre le moment ou je quitte, et le moment ou le menu s'efface.

Comment faire ça ?

Vu que c'est cette fonction qui me permet d'afficher les sous menu :

Code : Tout sélectionner

function montre(id) 
{
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) 
	{
		if (document.getElementById('smenu'+i)) 
		{
			document.getElementById('smenu'+i).style.display='none';
		}
	}
	if (d) 
	{
		d.style.display='block';
	}
}

J'ai essayé la meme mais inversée, mais ça ne marche pas :

Code : Tout sélectionner

function cache(id) 
{
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) 
	{
		if (document.getElementById('smenu'+i)) 
		{
			document.getElementById('smenu'+i).style.display='block';
		}
	}
	if (d) 
	{
		d.style.display='none';
	}
}

Ta fonction montre() est suffisament bien faite pour pouvoir être utilisée directement

function montre(id) { 
   var d = document.getElementById(id); 
   for (var i = 1; i<=10; i++)  { // pour i allant de 1 à 10
      if (document.getElementById('smenu'+i)) { // si l'élément "smenu"+i existe dans la page
         document.getElementById('smenu'+i).style.display='none'; // on change son style pour le masquer
      } 
   } 

   if (d) { // si l'élément dont l'id est passé en paramètre existe dans la page
      d.style.display='block'; // on l'affiche
   } 
}

donc typiquement, si, au moment où tu déplaces ta souris hors du sous-menu (onMouseOut) tu appelles cette fonction sans lui passer de paramètres, ou en lui passant un id inexistant, elle se contentera de masquer tous les menus.

Avec la fonction setTimeout() tu peux retarder l'appel de la fonction. Attention toutefois, si à ce moment tu es parti sur un autre sous menu, elle les refermera tous. Y a donc peut être quelques ajustements à faire dans ce cas, mais essayes déjà comme ça pour commencer

Effectivement ça a l'air de bien marcher.

Où dois-je insérer la fonction setTimeout() ?

j'ai essayé un onMouseOut="javascript:setTimeout("montre()",1000);"
ainsi que de la mettre directment dans la fonction, mais ça ne donne pas les resultats attendus.

C'est tout bon, faut juste pas mettre de guillemets dans des guillemets

Essaye comme ceci :

Code : Tout sélectionner

onMouseOut="javascript:setTimeout('montre()',1000);"

Effectivement, ça marche mieux merci.

Et evidemment, nouveau problème, lorsque la souris quitte la box, pour aller sur le sous-menu, meme si ma souris reste sur le sous menu, celui ci se ferme à la fin de mon délai de timeout. j'imagine que je dois rappeler ma fonction montre(), sur chaque item de mon sous-menu, ou c'est plus compliqué ?

Doit y avoir plusieurs façon de faire.. la première qui me vient en tête, c'est lorsque ta souris passe sur un autre menu (ou sous-menu), d'arrêter le timeout (clearTimeout()).

Tu aurais ainsi :

Code : Tout sélectionner

// quand la souris sors d'un menu, déclenche le timeout
onMouseOut="javascript:variableDuTimeOut = setTimeout('montre()',1000);" 

// quand la souris arrive sur un menu, s'il y a un timeout, elle l'arrête.
onMouseOver="javascript:if(variableDuTimeOut) clearTimeout(variableDuTimeout);"

Il est possible également que tu ais besoin de déclarer la variable au préalable.

<script language="JavaScript">
var variableDuTimeOut;
</script>

à tester

Forum d'entraide PHPFrance

fonction cacherMenu() sur menu CSS

fonction cacherMenu() sur menu CSS