JQUERY hover dropdown avec hoverIntent

Question

Je crée une liste déroulante qui glisse vers le bas lorsque survolé. C'est un code que j'ai eu. Je veux utiliser HoverIntent pour atteindre cet objectif.

.menu_img est la classe sur l'image qui planait au-dessus pour commencer la glisser vers le bas de la liste

.page_nav est la classe sur la liste qui glisse vers le bas lorsque .menu_img survole.

$(document).ready(function(){ 
    $('img.menu_img').click(function() { 
    $('ul.page_nav').stop().slideDown('slow'); 
    }); 
}); 

HTML

<div id="helper_bar"> 
    <div class="page_width"> 
     <img src="images/page_nav.png" alt="page_nav" title="use this to navigate the page" class="menu_img" width="179" height="33" /> 
    </div> 
</div> 

<div class="page_width"> 
    <ul class="page_nav"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services Offered</a></li> 
      <li><a href="#">The Team</a></li> 
      <li><a href="#">The Process</a></li> 
    </ul> 
</div> 

Voici le code que j'ai. Cela fonctionne si vous cliquez sur l'img, mais si vous passez .click à .hover, il va planer lorsque vous essayez d'aller à la li. C'est pourquoi j'ai introduit le plugin hoverIntent mais je ne sais pas comment l'intégrer pour obtenir la bonne solution que j'essaie de créer. BTW je n'ai pas inclus le code HTML mais c'est une image simple et ul li tags que je sais fonctionnent correctement. Il y a un affichage: aucun; sur le ul li et j'ai fait quelques trucs pour le faire fonctionner correctement dans ma disposition. (J'ai la mise en page un peu différente d'une liste déroulante régulière.) De toute façon, je suis très certain que mon CSS est correct, j'ai juste besoin de comprendre comment écrire le Jquery. Merci!

Answer 1

[Réponse Mise à jour]

Qu'est-ce que vous voulez faire va être un peu difficile avec un effet de vol stationnaire. Voici une solution possible, mais vous ne pouvez pas utiliser hoverIntent avec car il a besoin des événements à bulles, et les événements mouseenter et mouseleave ne font pas de bulles. Cependant, j'ai intégré un effet de type hoverIntent dans cette solution. Tout d'abord envelopper les deux éléments dans un seul div avec l'id de menu:

<div id="menu"> 
    <div id="helper_bar"> ... </div> 
    <div class="page_width"> ... </div> 
</div> 

et utiliser ce JS (à l'intérieur d'un événement document.ready):

var trigger = $("img.menu_img")[0], // The DOM element 
    $nav = $("ul.page_nav");  // The jQuery Wrapped DOM element 
$("#menu").mouseover(function(e){ 
    // Keep track when the mouse is over the menu area 
    if(e.target == this){ 
    $(this).data('over', true); 
    }  

    // Only show menu if the img.menu_img was what triggered the event 
    if(e.target == trigger){ 
    $nav.stop().slideDown('slow'); 
    } 
}).mouseout(function(e){ 
    if(e.target == this){ 
     var $this = $(this); 
     $this.data('over', false); 
     window.setTimeout(function(){ 
      if(!$this.data('over')) $nav.stop().slideUp('slow'); 
     }, 500); // Wait half a second to see if the mouse reenters the element 
    } 
}); 

S'il vous plaît demander si vous avez des questions ou des problèmes avec cette solution.

[Original réponse]

hover ne fonctionnera jamais pour ce que vous voulez, puisque la liste ul ne peut jamais être un enfant d'un img. Chaque fois que vous quittez le img, le menu est masqué. Ce que je recommande, est quelque chose comme ça (En fait, je vous recommande d'utiliser l'image de remplacement au lieu d'une image, mais permet de faire une seule chose à la fois):

HTML

<ul id="nav"> 
    <li><img class="menu_img" alt="Home" /> 
     <ul class="page_nav"> 
     ... 
     </ul> 
    </li> 
    .... 
</ul> 

JS

$("#nav > li").hoverIntent(function(){ 
    $('ul.page_nav', this).stop().slideDown('slow'); 
}, function(){ 
    $('ul.page_nav', this).slideUp('slow'); 
}); 

de cette façon, l'événement mouseenter (ou une version retardée avec hoverIntent) se déclenche lorsque l'li est plané, et a gagné ne tirez pas à nouveau jusqu'à ce que la souris quitte la liste entière.Donc, tant que la souris est sur le li ou l'un de ses enfants, l'événement mouseout ne se déclenchera jamais, permettant au page_nav de faire son travail en tant que menu.