Hide active submenu while hovering other menu items

Question

I am using a css class:

#navbar .current-menu-ancestor ul.sub-menu {display:inline;}

to make the submenu of its page sticky.

I need to hide it (via jQuery) if I am hovering the other top level menu items.

example:

Top Item 1
- Menu 1a
- Menu 1b
Top Item 2
Top Item 3
- Menu 3a
- Menu 3b
- Menu 3c

If I am on the page Menu 1b I now have all the submenu of Top Item 1 shown.
I need that when I hover on Top Item 3 to show its sub menu and hide the "active" sub-menu.

(these are horizontal submenus with transparent background...)

It would really help if you would put the code on jsFiddle to show what's not working. — Brian Hoover
I you are interested in using plugins for this then chk this out tripwiremagazine.com/2012/12/jquery-menu-plugins.html there are good animations and css attached to these menubars... — Scorpio

Ross Brasseaux Ross Brasseaux · Accepted Answer · 2012-12-28T17:01:50

There are ways to do this via CSS that might be more viable.

Red Team Design.com has posted a few very popular methods of accomplishing your goal:

That is an excellent example, and they provide a useful tutorial as well. However, if you absolute have to use jquery (if this is some kind of assignment for instance) I would stick to click events to avoid complex code, then again I am truly lazy :)

You could easily do something like this:

Demo: http://jsfiddle.net/jrb9249/5n5Bp/4/

HTML:

<html>
    <body>
        <div class="div_parent">
            <ul class="top_menu">
                <li><a href="#">Home</a></li>
                <li id="shop_li"><a href="#" onClick="javascript:mouseEvent('#shop_div')">Shop</a>
                    <div class="sub_div" id="shop_div">
                        <ul id="shopmenu" class="sub_menu">
                            <li>Electronics</li>
                            <li>Software</li>
                            <li>Mail-Order Brides</li>
                            <li>Insert bazaar product here</li>
                        </ul>
                    </div>
                </li>
                <li id="contact_li"><a href="#" onClick="javascript:mouseEvent('#contact_div')">Contact Us</a>
                    <div class="sub_div" id="contact_div">
                            <ul id="contactmenu" class="sub_menu">
                                <li>Email</li>
                                <li>Phone</li>
                            </ul>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

Javascript:

var anim;

$(document).click(function(event){
    if(event.target.nodeName != 'LI' && (anim==0)){
        $('.sub_div').fadeOut('fast');
    };
});

anim = 0;
function mouseEvent(myid){
    $('.top_menu li > div').each(function(){
        $(this).fadeOut('fast');
    });
    anim = 1;
    $(myid).fadeIn('fast', function(){
        anim = 0;
    });
};

CSS:

.div_parent
{
    background:transparent;
    padding:5px;
    margin:0px;
    float:left;
    border:solid 1px gray;
}

.sub_div
{
    paddin:0px;
    margin:0px;
    position:absolute;
    margin-top:3px;
    display:none;
}


.top_menu, .sub_menu
{
    margin:0px;
    padding:0px;
    background:transparent;
}

.top_menu li
{
    float: left;
    display:inline;
    margin:0px 5px 0px 5px;
}

a:link,a:active,a:visited
{
    color:blue;
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

.sub_menu li
{
    clear:both;
    float:left;
    background:#E2EDD5;
    border:solid 1px white;
    padding:2px;
    width:150px;
}

.sub_menu li:hover
{
    cursor:pointer;
    background:#FFFFE8;
}

This uses jquery's fadeOut animation (simple) and the variable "anim" to avoid conflicts between opening and closing the form. And the CSS will tidy everything up for you. I tried to use jquery as much as possible in this demo. I hope it helps. Good luck.

Hide active submenu while hovering other menu items

2 Answers