Я пытаюсь реализовать горизонтальное выпадающее меню, используя jquery и hoverintent.Я почти понял, но когда вы перемещаете указатель мыши от "li", содержащего раскрывающуюся ссылку на другой "li" в верхней части экрана, меню остается там.
Цель:
- нажмите на ссылку, которая вызывает раскрывающееся меню
- увеличивается высота меню, которое толкает содержимое страницы вниз
- появляется подменю
- если вы перемещаете мышь из подменю или выключаететриггер li, меню должно исчезнуть
Прямо сейчас, пока ваша мышь находится в любом месте меню, подменю все еще отображается.
Я пытался изменить код здесь, но мойне работает, как в примере, и я не знаю почему.
Плагин HoverIntent jQuery, инициируемый событием щелчка
МОЙ 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
})