JQUERY всплывающее меню с hoverIntent - PullRequest
Новая
       28

JQUERY всплывающее меню с hoverIntent

1 голос
/ 14 февраля 2010

Я создаю выпадающий список, который скользит вниз при наведении. Это какой-то код, который у меня был. Я хочу использовать HoverIntent для достижения этой цели.

.menu_img - это класс на изображении, который находится над ним, чтобы начать скольжение вниз по списку

.page_nav - это класс в списке, который скользит вниз, когда .menu_img наведен на *. 1005 * 

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

Это код, который у меня есть. Это работает, если вы нажмете на img, но если вы переключитесь .click на .hover, он будет зависать при попытке перейти к li. Вот почему я ввел плагин hoverIntent, но я не уверен, как его интегрировать, чтобы получить правильное решение, которое я пытаюсь создать.

Кстати, я не включил HTML-код, но это простое изображение и теги ul li, которые, как я знаю, работают нормально. Есть дисплей: нет; на ul li, и я сделал кое-что, чтобы сделать это правильно в моем макете. (У меня макет немного отличается от обычного выпадающего списка.) В любом случае, я уверен, что мой CSS правильный, мне просто нужно выяснить, как написать Jquery. Спасибо!

1 Ответ

2 голосов
/ 14 февраля 2010

[Обновленный ответ]

То, что вы хотите сделать, будет немного сложным с эффектом наведения. Вот возможное решение, но вы не можете использовать hoverIntent с ним, потому что для этого нужны события, чтобы всплыть, а события mouseenter и mouseleave не всплывают. Тем не менее, я включил эффект, похожий на hoverIntent в этом решении. Сначала оберните оба элемента в один элемент с идентификатором menu: 

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

И используйте этот JS (внутри события 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
   }
});

Пожалуйста, спросите, если у вас есть вопросы или проблемы с этим решением.

[Оригинальный ответ]

hover никогда не будет работать для того, что вы хотите, поскольку список ul никогда не может быть дочерним по отношению к img. Каждый раз, когда вы выходите из img, меню будет скрываться. Я бы порекомендовал, что-то вроде этого (На самом деле, я бы порекомендовал вам использовать замену изображения вместо изображения, но давайте делать только одну вещь за один раз):

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');
});

Таким образом, событие mouseenter (или его отложенная версия с hoverIntent) срабатывает при наведении li и не запускается снова до тех пор, пока мышь не завершит весь список. Таким образом, пока мышь находится над li или любым из его дочерних элементов, событие mouseout никогда не сработает, что позволит page_nav выполнять свою работу в качестве меню.

...