Question

I want to use jQuery to animate a simple vertical menu that can be seen here:

http://www.cybart.com/bscg/

When you hover over OUR SOLUTIONS, PRODUCT COVERAGE, OUT TEAM and CONTACT US categories, you will see subcategories open. Note that if one of the groups of subcategories is already open, it closes when you hover over another category link.

I want to keep essentially the same functionality but have opening / closing of the subcategories animated.

I would be grateful if someone could teach me how to do that!

Additional info:

The menu is located in the <div id="access">

Here’s the CSS that makes it work:

#access {
position:absolute; 
left:50%;
top:140px;
margin-left:-600px;
    width: 280px;
z-index:99999;
}

#access ul {
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul,
#access ul ul {
list-style-type:none;
width: 250px;
}

#access ul ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}

#access ul li:hover > ul {
    display: block;
}

#access ul li:last-child {
height:77px;
background: url(images/aba/ABALink.jpg) no-repeat top left;
text-indent: -3000px;
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul li:last-child a {
background:transparent;
height:0px;
}

#access ul ul li:last-child {
background:transparent;
height:32px;
text-indent: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#access ul ul li:last-child a {
background:#fff;
background: rgba(255, 255, 255, 0.85);
height:18px;
}


#access ul a,
#access ul ul a {
display:block;
padding: 7px 0 7px 10px;
background:#fff;
background: rgba(255, 255, 255, 0.85);
text-decoration:none;
color:black;

} 

#access ul ul a {
margin-left: -18px;
padding-left:20px;
width:230px;
}

#access ul a:hover,
#access ul ul a:hover {
color: #CA0000;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #CA0000;
}

Answer 1

Remove this CSS:

#access ul li:hover > ul {
    display: block;
}

Add this JQuery:

$(function(){

    $('#access ul li').each(function(){
        $(this).children('ul').data('expanded',false); // set variable for all lists as closed
    });

    $('#access ul li').click(function(){
        if($(this).children('ul').data('expanded') === false)
        {
            $(this).children('ul').stop().slideDown();
            $(this).children('ul').data('expanded',true); // set as open
        }
        else
        {
            $(this).children('ul').stop().slideUp();
            $(this).children('ul').data('expanded',false); // set as closed
        }
    });

});