Question

I’m making a menu in jquery. You can see it at http://mywash.dk/testtest/index.html

The submenu that is shown from the start (below ‘Hvordan’) is the active menu so it should always be shown (unless you hover on another menu-item in which case another submenu should show.

It’s working okay but has 1 annoying bug. When you hover from ‘Hvad’ to ‘Hvem’ it quickly display and hides the active menu before showing the menu it is supposed to.

Any idea why this is the case?

Thanks so much for your help!

Jquery:

$(document).ready(function() {

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).show("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
          $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
        }


    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
            $('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
        }
    });
});

Html:

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

Answer 1

Your problem is caused by the immediate calling of the hover action when you leave or enter a menu element.

hoverIntent plugin is one possible fix to your problem

http://cherne.net/brian/resources/jquery.hoverIntent.html

Notice on the second demo block you can skip from the first to third block with out triggering the second blocks action even when mousing over it.

edit:

<script type="text/javascript">
$(document).ready(function() {
    $('.default').show()
    $('#menu .menuitem').hover(
    function() {
        $('.banner').each(function() {
            $(this).stop(true,true).hide();
        })
        $('ul', this).show("slide", { direction: "left" }, 400);
    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);
        $('.default').delay(500).show("slide", { direction: "left" }, 400);
    });
});
</script>

I added a default and changed some class names around a bit, which wasn’t really necessary, but i think you can figure it out.

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Produkter</a></li>
                <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <li class="first-item"><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
            </ul>
        </li>
        <li class="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Jquery submenu, hover in/out animation problem