[Résolu] Menu jQuery et sous-menu

Question

sirk

13 Dec 2010 à 10:52

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 :


<!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>

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

</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>

EDIT : Un autre forummeur m'a aidé pour mon problème, il ma conseillé d'intégrer un timer, je poste le code Javascript ici si certains en ont besoin !


$(document).ready(function(){
	
  var timer;
  var timer2;
  
$("#lien_web").mouseenter(function(){
$("#sous_menu_web").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_web").mouseenter(function() {
    clearTimeout(timer);
    });
	
	$("#sous_menu_web").mouseleave(function() {
		 timer2 = setTimeout(function() {
      $("#sous_menu_web").animate({height:'0px'}, { queue:false, duration:'normal' });
    },150);
  });
});

En passant le sous_menu dans le header, ça fonctionne parfaitement comme je le souhaitais !
Modifié par sirk (13 Dec 2010 - 22:44)

Sujet clos