[RESOLU] [jQuery] Problème sur un menu avec sous-menu

Mouseleave, pas sur tous les éléments ?

Sujet résolu

13 décembre 2010 à 13:56:41

Bonjour à toutes et à tous,

Alors voilà ça fait depuis vendredi que je recherche sur le Net, j'ai essayer beaucoup de choses, mais je n'arrive toujours pas à trouver ce que je veux.

Je début en jQuery et j'aimerais avoir une animation toute simple que j'ai déjà codée en majeure partie. Cependant un problème persiste.

En effet, j'aurais besoin de créer un "sous-menu" présent sous un seul item d'un menu horizontal. Donc au mouseover sur le lien spécifié on affiche, et au mouseleave on masque. J'utilise la fonction animate().

Mais mon problème, c'est que lorsque l'on est en mouseover sur le lien, et qu'on veut aller cliquer dans le sous-menu, celui ci se masque à cause du mouseleave !

Je sens que la solution doit être très simple mais je ne l'ai pas et toutes mes recherches/tentatives ne mènent à rien ! Si quelqu'un peut m'expliquer brièvement, je lui serait plus que reconnaissant !

Je vous fourni un code tout simple qui vous permettra de comprendre (vous pouvez le lancer en local il est fonctionnel) :

<style>
#conteneur {float:left;width:750px;height:600px;}
#header {float:left;width:750px;height:200px;background-color:#C93;}
#sous_menu {float:left;width:750px;background-color:#900;overflow:hidden;}
#contenu {float:left;width:750px;height:400px;background-color:#90C;}
.bouton {float:left;height:200px;width:150px;}
.bouton:hover {background-color:#09F;}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<!--Redimensionnement de la div sous menu-->
<script type="text/javascript">
$(document).ready(function(){
	$("#lien").mouseleave(function(){
  		$("#sous_menu").animate({height:'0px'}, { queue:false, duration:'normal' })
	});

    $("#lien").mouseenter(function(){
      $("#sous_menu").animate( { height:"40px" }, { queue:false, duration:'normal' } )
	   });
});
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>


</head>
<body>

	<div id="#conteneur">
    	<div id="header">
        	<a href="" ><div class="bouton">Acceuil</div></a>
            <a href="" ><div class="bouton">Section 2</div></a>
            <a id="lien" href="" ><div class="bouton">LIEN</div></a>
            <a href="" ><div class="bouton">Section 4</div></a>
            <a href="" ><div class="bouton">Section 5</div></a>
        </div>
        
        <div id="contenu">
        
        	<div id="sous_menu" style="height:0px;">
            	<p><a href=""> Lien sous menu 1</a> - <a href=""> Lien sous menu 2</a> - ...</p>
            
            </div>
            
            <div id="corps">
            </div>
        </div> 
    </div>
</body>
</html>

Golmote

13 décembre 2010 à 16:31:58

Bah étant donné la structure de ton code, le comportement est parfaitement logique.
Il faudrait normalement que ton sous-menu soit un élément enfant de ton lien qui l'ouvre... afin que le mouseleave ne se déclenche pas.

Avec ta structure actuelle, il est cependant possible de se débrouiller quand même, avec un petit timeout.
Le principe serait de ne déclencher l'action de mouseleave que quelques millisecondes plus tard... et d'annuler le déclenchement lors du mouseenter sur le sous-menu. Tu me suis ?

Dans la pratique, ça donnerait quelque chose comme ça :

$(document).ready(function(){
  var timer;
  $("#lien").mouseleave(function(){
    timer = setTimeout(function() {
      $("#sous_menu").animate({height:'0px'}, { queue:false, duration:'normal' });
    },300);
  });
  
  $("#lien").mouseenter(function(){
    $("#sous_menu").animate( { height:"40px" }, { queue:false, duration:'normal' } );
  });

  $("#sous_menu").mouseenter(function() {
    clearTimeout(timer);
    });
});

A toi de tester le nombre de millisecondes le plus adapté.

Tu pourrais aussi ajouter un événement mouseleave sur le sous-menu, afin de le refermer

sirk

13 décembre 2010 à 16:43:40

En effet, l'idée du timer est bonne ! Je regarderais ce soir et posterais le code si j'obtiens ce que je veux pour les éventuels personnes qui auront le même problème.
Merci beaucoup Golmote, au moins ce soir je vais dormir !

EDIT :

Voilà, j'ai réussi à implémenter exactement ce que je voulais. Le code JS est le suivant :

$(document).ready(function(){
	
  var timer;
  var timer2;
  
$("#lien").mouseenter(function(){
$("#sous_menu").animate( { height:"40px" }, { queue:false, duration:'normal' } );
  });
  
  $("#lien_web").mouseleave(function(){
    timer = setTimeout(function() {
      $("#sous_menu_web").animate({height:'0px'}, { queue:false, duration:'normal' });
    },150);
  });


  $("#sous_menu").mouseenter(function() {
    clearTimeout(timer);
    });
	
	$("#sous_menu").mouseleave(function() {
		 timer2 = setTimeout(function() {
      $("#sous_menu").animate({height:'0px'}, { queue:false, duration:'normal' });
    },150);
  });
});

J'ai rajouter un évènement mouseleave() sur le "sous_menu".

Et j'ai également du modifier ma structure HTML, en passant le sous menu dans le bloc header pour que ça fonctionne sans ac coups.

Merci encore, tu m'as enlevé une grosse épine du pied. Je reviendrais mettre le lien vers le site final qui implémente ce code quand il sera entièrement terminé !