2
我已经创建了一个dropline菜单。我正在使用一个使用Foundation 5框架的WordPress主题。第二级菜单不是很容易使用我添加了一些JavaScript来添加延迟到第二级菜单消失。这个JavaScript意味着:下拉菜单JavaScript延迟
- 延迟添加到二级菜单,这样,如果你将鼠标悬停在菜单外二级菜单不瞬间消失
这在某种程度上工作,但导致一些问题
- 有时,当您暂停悬停在顶级菜单项上时,您无法保持悬停并查看其他顶级项目的子菜单。
- 我不得不使用相同的时间延迟值进行顶级项目悬停,并且该值设置用户在菜单消失之前已经在菜单之外多久。这是一个问题,因为有足够的时间来达到二级菜单项,然后悬停在顶级菜单变得非常笨重
任何提示将非常感激!我还没有包括所有的HTML的菜单作为其相当长
<ul id="menu-main-navigation" class="desktop-menu"><li id="menu-item-488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-488"><a href="http://new.st-laurence.com/">Home</a></li>
<li id="menu-item-489" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-489"><a href="http://new.st-laurence.com/about-us/">About Us</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-490" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-490"><a href="http://new.st-laurence.com/about-us/latest-news/">Latest News</a></li>
<li id="menu-item-491" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-491"><a href="http://new.st-laurence.com/about-us/our-history/">Our History</a></li>
<li id="menu-item-492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-492"><a href="http://new.st-laurence.com/about-us/photo-gallery/">Photo Gallery</a></li>
<li id="menu-item-493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-493"><a href="http://new.st-laurence.com/about-us/exam-results/">Exam Results</a></li>
<li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-494"><a href="http://new.st-laurence.com/about-us/senior-team/">Senior Team</a></li>
<li id="menu-item-495" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-495"><a href="http://new.st-laurence.com/about-us/governors/">Governors</a></li>
<li id="menu-item-496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-496"><a href="http://new.st-laurence.com/about-us/slsa-parents-association/">SLSA Parents’ Association</a></li>
<li id="menu-item-497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-497"><a href="http://new.st-laurence.com/about-us/ofsted/">Ofsted</a></li>
<li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-526"><a href="http://new.st-laurence.com/about-us/academy/">Academy</a></li>
</ul>
</li>
<li id="menu-item-499" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-327 current_page_item menu-item-has-children menu-item-499 active-menu-item active"><a href="http://new.st-laurence.com/join-us/">Join Us</a>
<ul class="sub-menu">
<li id="menu-item-500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-500"><a href="http://new.st-laurence.com/join-us/admissions/">Admissions</a></li>
<li id="menu-item-501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-501"><a href="http://new.st-laurence.com/join-us/primary-transition/">Primary Transition</a></li>
<li id="menu-item-601" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-601"><a href="http://new.st-laurence.com/vacancies/">Staff Vacancies</a></li>
</ul>
</li>
<li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-502"><a href="http://new.st-laurence.com/curriculum/">Curriculum</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-503"><a href="http://new.st-laurence.com/curriculum/subjects/">Subjects</a></li>
</ul>
</li>
<li id="menu-item-509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-509"><a href="http://new.st-laurence.com/school-life/">School Life</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-510" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-510"><a href="http://new.st-laurence.com/school-life/houses/">Houses</a></li>
<li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="http://new.st-laurence.com/school-life/students-wellbeing/">Student Wellbeing</a></li>
<li id="menu-item-513" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"><a href="http://new.st-laurence.com/school-life/school-council/">School Council</a></li>
<li id="menu-item-512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"><a href="http://new.st-laurence.com/school-life/school-clubs/">School Clubs</a></li>
<li id="menu-item-514" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-514"><a href="http://new.st-laurence.com/school-life/performing-arts/">Performing Arts</a></li>
<li id="menu-item-516" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-516"><a href="http://new.st-laurence.com/school-life/sports-leadership/">Sports Leadership</a></li>
<li id="menu-item-517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-517"><a href="http://new.st-laurence.com/school-life/spiritual-life/">Spiritual Life</a></li>
</ul>
</li>
</ul>
这里是我的JavaScript
$(document).ready(function(){
var $submenu;
var $delay = 3000;
var myVar;
$("#menu-main-navigation li:not(.active)").mouseover(function() {
clearTimeout(myVar);
$submenu = $(this).find('.sub-menu');
$submenu.css({
display: 'block',
left:'0'
});
}).mouseout(function() {
if($("#menu-main-navigation li:hover").length){
clearTimeout(myVar);
return false;
}else{
var $submenu = $(this).find('.sub-menu');
$submenu.hover(
function(){
$(this).toggleClass('is-hover');
}
);
setTimeout(function(){
if(!$submenu.hasClass('is-hover')){
myVar = setTimeout(function(){
$submenu.css({
display: 'none',
left:'-999'
});
},500);
}
},1000);
}
});
$('.sub-menu li').mouseover(function(){
$(this).closest('ul').addClass('is-hover');
clearTimeout(myVar);
$(this).closest('ul').css({
display: 'block',
left:'0'
});
}).mouseout(function(){
$(this).closest('ul').removeClass('is-hover');
myVar = setTimeout(function(){
$(this).closest('ul').css({
display: 'none',
left:'-999'
});
},$delay);
});
});
的JS你可以添加相关的CSS,并作出[StackSnippet(http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2 -0) – brasofilo 2014-10-20 18:58:01