Блог

Я пытаюсь реализовать горизонтальное выпадающее меню с использованием jquery и hoverintent. У меня почти получилось, но когда вы отводите курсор мыши от «li», который содержит выпадающую ссылку на другой «li» в верхнем меню, меню остается там.

Цель:
-щелкните ссылку, которая запускает выпадающее меню
— увеличится высота меню, что приведет к уменьшению содержимого страницы
— появится подменю
— если вы уберете курсор мыши с подменю или с триггера li, меню должно исчезнуть

Прямо сейчас, пока ваша мышь находится в любом месте меню, подменю все еще видно.

Я пытался изменить приведенный здесь код, но мой работает не так, как в примере, и я не знаю почему.
Плагин jQuery для hoverIntent, инициируемый событием click

МОЙ HTML:

 <div id="menu">
<ul id="topnav">
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a>
    <ul id="subnav">
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
      <li><a class="subnavlink" href="#">Drop Down Link</a></li>
    </ul>
  </li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="border"><a class="topnavlink" href="#">Main Link</a></li>
  <li class="noborder"><a class="topnavlink" href="#">Main Link</a></li>
</ul>
</div>
  

МОЙ JQUERY:

 function slideDown() {
    $(this).click(function() {
        $("#menu").stop().animate({height:"68px"}, 200);
        $("ul#subnav").slideDown(200)
    }); 
    }

function slideUp() {
    $("ul#subnav").slideUp(200);
    $("#menu").stop().animate({height:"40px"}, 200);
    }

$("ul#topnav").hoverIntent({
    sensitivity: 7,
    interval: 100,
    over: slideDown,
    timeout: 500,
    out: slideUp
})
  

Вы ознакомились с Superfish?

http://users.tpg.com.au/j_birch/plugins/superfish/