Menu horizontal en jquery

Bonjour,
Je découvre JQuery depuis quelque semaines, que je trouve vraiment fabuleux. Après avoir essayé pas mal de petits trucs gadgets, j'en reviens aux fondements, et principalement à la navigation (je bosse pas mal sur IE6, et JQuery est un bon moyen de passer outre tout ce que ce navigateur ne permet normalement pas).

Donc, connaissez-vous un bon tuto sur internet pour m'aider à comprendre les mécanismes, parce que là je ne m'en sors pas.
Dans le cas contraire, quelques explications seraient les bienvenues.

Voilà ce que j'ai tenté de faire :

<ul id="menu">
      <li class="menu_actu"><a href="#">Actualit&eacute;s</a>
        <ul>
          <li><a href="index.html">A la Une</a></li>
          <li><a href="focus_groupe.html">Focus Groupe</a></li>
          <li><a href="evenements_pp.html">Ev&eacute;nements PP</a></li>
          <li><a href="revue_presse.html">Revue de presse</a></li>
        </ul>
      </li>
      
       <li class="menu_business"><a href="#">Business</a>
       <ul>
          <li><a href="performance.html">Max Performance</a></li>
          <li><a href="good_news.html">Good News</a></li>
          <li><a href="web.html">Tout sur le Web</a></li>
          <li><a href="trucs.html">Trucs &amp; Astuces</a></li>
        </ul>
       
       </li>
      
      
     <li class="menu_people"><a href="#">People</a></li>  
      
 <li class="menu_engagements"><a href="#">Nos engagements</a></li>     
      
 </ul>

Les css on s'en moque un peu je pense, j'ai juste caché les sous-menus comme ceci :

#menu li ul {
	display: none;
}

Maintenant le plus important, le code javascript (on se doute que j'ai fait également un lien vers le fichier JQuery) :

<script type="text/javascript">
$(document).ready(function() {


 
<!--Masque les sous-menus à l'ouverture de la page-->
	 $("#menu li ul").hide();

<!--Ouverture des sous-menus au survol-->
 
 $(".menu_actu a").hover(function(){
   $(".menu_actu ul").show();
 },function(){
   $(".menu_actu ul").hide();
 });
 
 

 $(".menu_business a").hover(function(){
   $(".menu_business ul").show();
 },function(){
   $(".menu_business ul").hide();
 });
 

});

// --> 
</script>

(tiens, je remarque que je cache encore les sous-menus, ça fait un peu doublon avec le css. M'enfin je pense pas que ce soit bien grave...).

Donc voilà où j'en suis. Les sous-menus apparaissent et disparaissent bien au survol des liens, mais je ne sais pas aller plus loin (par exemple comment faire pour qu'ils ne disparaissent pas quand je quitte le lien parent pour me diriger avec la souris vers eux, etc.).

Voilà ce que donne le menu en image :


Un petit coup de main m'aiderait pour ce travail en particulier, mais aussi sur la compréhesion de JQuery en général.

Merci donc par avance.
Modifié par Ralf (28 Sep 2009 - 17:22)

Petit up.

Bonsoir,

Évite de cacher le menu avec le css, car si java-script n'est pas activé, le menu n'est pas visible.

Pour le reste, il va falloir faire joujou avec la "temporisation" (setTimeout/setTimeInterval) et le changement d'état (enrouler/dérouler).

L'algo ressemble à ça

cacher les menus

action :: quand on rentre dans un menu
    si menu = cacher
        arreter_cacher()
        afficher()

action :: quand on quitte le menu
    si menu = cacher
        timer(cacher())

$(document).ready(function(){
	/** @note l'état d'un menu est enregistre via $.data qui est accroché à un élément*/
	//fait disparaitre les sous menu
	$("#menu li ul").hide()
	//récupère le parent (ici : li)
	.parent()
	//ajoute un événement mouseenter (quand on rentre dans l'élemet)
	.bind("mouseenter",function(){
		//recupere $.data
		var menu_info = $.data(this, "menu_info");
		//si menu_info inexistant ou menu est cacher, on l'affiche
		if (!menu_info || true !== menu_info.etat)
		{
			//si timer existe, on l'arrête
			if (menu_info.timer)
				clearTimeout(menu_info.timer);
			//affiche le menu
			$(this).children("ul").show("slow");
		}
		//etat afficher et timer null
		$.data(this, "menu_info", {etat:true, timer:null});
    })
	//ajoute un événement mouseleave (quand on sort de l'élemet)
	.bind("mouseleave",function(){
		var e = this;
		//etat cacher et timer à la valeur de setTimeout
		$.data(this, "menu_info", {
			etat:false,
			//fonction lancé au bout de 1.5s
			timer:setTimeout(function(){
				//cache le menu
				$(e).children("ul").hide("slow");
			}, 1500)
		});
    });
});

OK, je vois à peu près le truc. Si je quitte le lien du menu principal, le sous-menu reste activé 1,5 seconde, le temps de survoler ce sous-menu.

J'aimerais en revanche qu'il disparaisse, sans délai, dès qu'on survole un autre lien de menu principal.
C'est possible ?

Oui, en modifiant la fonction du mouseenter. Récupéré tous les élément afficher et les cacher pour ensuite afficher celui désiré. Également modifier data pour supprimer le timer et l'état du menu.
Mais vu que tu ne veux pas de délai, un data pour chaque li ne sert pas à grand chose, une variable pour retenir le menu déroulé suffirais (ou data mais sur l'id menu). Tout les traitements ce fessant sur celle-ci, le code et pas mal simplifier.