I have created a dropline menu. I’m using a WordPress theme that is using the Foundation 5 framework. The second level menu was not very easy to use I have added some JavaScript to add a delay to the 2nd level menu disappears. This JavaScript is meant to:
- Add a delay to the 2nd level menu so that if you hover outside the menu the 2nd level menu doesn’t instantly disappear
This is working in a way but is causing a few issues
- Sometimes when you pause hovering over the top level menu items you then can’t keep hovering and see other top level item’s sub menus.
- I am having to use the same time delay value for top level item hover and the value that sets how long a user has been outside the menu before it disappears. This is causing a problem as if there is enough time to reach 2nd level menu items, then hovering over the top level menu becomes very clunky
Any tips would be really appreciated! I havent included all of the HTML for the menu as its quite long
<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>
Here is my 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);
});
});
Hope this might help someone else. Here is the js I’ve used