jQuery fully close an open submenu before running next

Question

Currently my jQuery code below opens and closes a submenu when its parent is hovered. But my only problem is when I mouse over another top level item the opened submenu starts to close and the submenu for the item I am now hovered starts to slide down, so there are partially 2 submenu's open and depending where the mouse is, it ends up flickering between the too.

How could I achieve it so that the new submenu would only open only after the previous one has finished closing? The effect I would want ideally would be one like this plugin here

jsFiddle

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});

flickering is caused by css, try to set top: 15px; to submenu... something like: http://jsfiddle.net/n3V4T/3/ — sinisake, Mar 05 '14 at 11:27
What about removing `top` property for submenu as sugested in some way by @nevermind: http://jsfiddle.net/n3V4T/4/ — A. Wolff, Mar 05 '14 at 11:30

score 0 · Answer 1 · edited Mar 05 '14 at 11:49

Have look on this code..................

jsFiddle

HTML

<nav class="main-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">List 1</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">List 2</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                    <li><a href="list">List</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS
.main-menu {
    width: 100%;
}
.main-menu ul {
    float: left;
    position: relative;
    width: 100%;
}
.main-menu ul li {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.main-menu ul li .sub-menu {
    background: none repeat scroll 0 0 #F1F1F2;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 20px 10px;
    position: absolute;
    top: 16px;
}

Js

$(document).ready(function(){
    $(".main-menu ul:first li").mouseover(function(){
        if( $(this).find(".sub-menu").length > 0 ){
             $(this).find(".sub-menu").slideDown();   
        }
    }).mouseleave(function(){
        $(this).find(".sub-menu").slideUp();   
    });
    $(".sub-menu").mouseover(function(){
        $(this).slideDown();   
    }).mouseleave(function(){
        $(this).slideUp();   
    });
});

score 0 · Accepted Answer · answered Mar 05 '14 at 11:38

You must use Callback function of hover to trigger something after it has finished animating..

see your updated fiddle.. Please mess with the timings/etc to get the effect you want.

http://jsfiddle.net/n3V4T/6/

also - qualify your selectors better.. the contents of the list items will trigger your mouse over events..

var sub_menu = $('.main-menu .sub-menu'); //select all sub menus
$('.main-menu > ul > li.menuItem').hover(function () {
$this = $(this);
if ($('.sub-menu:visible').size() > 0) {
    console.log('slidingup' + $('.sub-menu:visible').size());
    $('.sub-menu:visible').slideUp('slow', function () {
        $this.find('.sub-menu').slideDown('slow');
        console.log('done');
    });
} else {
    $this.find('.sub-menu').slideDown('slow');
}
}, function () {
//   sub_menu.stop(true, true);//use stop on all submenus
$(this).find('.sub-menu:visible').slideUp('slow');
//Do you need this?
});

jQuery fully close an open submenu before running next

2 Answers2