jQuery expanding menu
- by Milen
Hi everybody, i have this html code:
<ul id="nav">
<li>Heading 1
<ul>
<li>Sub page A</li>
<li>Sub page B</li>
<li>Sub page C</li>
</ul>
</li>
<li>Heading 2
<ul>
<li>Sub page D</li>
<li>Sub page E</li>
<li>Sub page F</li>
</ul>
</li>
</ul>
With this JS code:
$(function(){
$('#nav>li>ul').hide();
$('#nav>li').mouseover(function(){
if ($('#nav ul:animated').size() == 0) {
$heading = $(this);
$expandedSiblings = $heading.siblings().find('ul:visible');
if ($expandedSiblings.size() > 0) {
$expandedSiblings.slideUp(500, function(){
$heading.find('ul').slideDown(500);
});
}
else {
$heading.find('ul').slideDown(1000);
}
}
});
})
For now the code works this way: When click on Heading 1, menu is expanded. When click on Heading 2, heading2 submenu menu is expanded and heading 1 submenu is closed. I need to rework it to this: Submenus must be closed automatically on mouseout.
Can somebody help me?
Thanks in advance!
