jquery menu hovering

Question

i have a menu that when i mouse over a div it will show and on mouse out it will fade out. the problem is that if you roll over any of the menu\'s children the menu will dis

Answer 1

This is a very simple problem most people tend to massively overcomplicate with timers and special case checks. The easy solution is via markup. Place both hover target and the menu under the same parent, and track hover on the parent. Like this. You may also want to use hoverIntent jQuery plugin to avoid false hover events.

A UX note: fade animations lasting over 500ms are just rude. Please don't do that.

Answer 2

Here's a simple solution: http://jsfiddle.net/32bLg/16/

Answer 3

Check out these nice examples:

Nice JQuery menus

A specific multilevel one:

Multilevel JQuery menu

HTML from link 2:

    <ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

CSS:

 #nav, #nav ul{
         margin:0;
         padding:0;
         list-style-type:none;
         list-style-position:outside;
         position:relative;
         line-height:1.5em;
     }

    #nav ul ul{
    top:auto;
    }

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

JS:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}

 $(document).ready(function(){
    mainmenu();
});

Answer 4

this is my fix

window.menushowing = false;

$('#menu').hover(

function() {
    window.menushowing = true;
}, function() {
    window.menushowing = false;
    hideMenu();
});

function hideMenu() {
    if (window.menushowing) return;
    $('#menu').animate({
        opacity: 0
    }, 1500, function() {
        $('#menu').hide();
    });
}

$('#examplePic').hover(

function() {
    window.menushowing = true;
    $('#menu').css('display', 'block');
    $('#menu').animate({
        opacity: 1
    }, 1500);

}, function() {
    hideMenu();
});

Answer 5

You need to contain the menu div inside of the hover div. See http://jsfiddle.net/T72jm/2/ .

You'll notice (at least in Chrome) that if you hover over your hover div and don't do anything, the menu div will fade out.