Вертикальная раздвижная панель навигации

Question

У меня есть вертикальное раздвижное меню, но есть несколько вещей, которые мне не хватает, и не знаю, как это сделать.

• Я хочу, чтобы все пункты меню к югу быть закрыты, когда страница загрузки/обновит
• При наведении указателя мыши на ссылку с подменю он скользит вниз и возвращается вверх, когда он парит над другой связи с суб меню. Мне нужно, чтобы скользить назад вверх каждый раз, когда мышь останавливается парит над ссылке (ы)

Вот код и спасибо

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script> 

<script type='text/javascript'> 
var $ = jQuery.noConflict(); 
$(document).ready(function(){ 
$("#secondpane li.menu-item").mouseover(function(){ 
$(this).next("li.menu_body").slideDown(500).siblings("li.menu_body").slideUp("slow"); 
}); 
}); 
</script> 



<div class="menu-container"> 
<ul id="secondpane"> 
<li><a href="#">home</a></li> 
<li class="menu-item"><a href="#">about us</a></li> 
    <li class="menu_body"><ul> 
     <li class="menu-item"><a href="#">testimonials</a></li> 
     <li class="menu-item"><a href="#">full width page</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">blog</a></li> 
    <li class="menu_body"><ul> 
     <li class="menu-item"><a href="#">web design</a></li> 
     <li class="menu-item"><a href="#">illustrations</a></li> 
     <li class="menu-item"><a href="#">art inspiration</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">portfolio</a></li> 
<li class="menu-item"><a href="#">contact</a></li> 
</ul> 
</div> 

Answer 1

Это работает!

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script> 

<style> 
li {list-style: none;} 
</style> 

<script type='text/javascript'> 
var $ = jQuery.noConflict(); 
$(document).ready(function(){ 
          $("#secondpane li.menu-item ul").hide(); 

          $("#secondpane li.menu-item").hover(function(){ 
            $(this).children("ul").slideDown(500); 
          },function(){ 
            $(this).children("ul").slideUp(500); 
          }); 

}); 
</script> 



<div class="menu-container"> 
<ul id="secondpane"> 
<li><a href="#">home</a></li> 
<li class="menu-item"><a href="#">about us</a> 
    <ul> 
     <li><a href="#">testimonials</a></li> 
     <li ><a href="#">full width page</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">blog</a> 
    <ul> 
     <li><a href="#">web design</a></li> 
     <li><a href="#">illustrations</a></li> 
     <li><a href="#">art inspiration</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">portfolio</a></li> 
<li class="menu-item"><a href="#">contact</a></li> 
</ul> 
</div> 

Answer 2

Это похоже на работу для меня!

Я просто добавил эту строку кода "$ (" # secondpane li.menu-item "). Siblings (" li.menu_body "). Hide();"

<script type='text/javascript'> 
var $ = jQuery.noConflict(); 
$(document).ready(function(){ 
          $("#secondpane li.menu-item").siblings("li.menu_body").hide(); 
          $("#secondpane li.menu-item").mouseover(function(){ 
              $(this).next("li.menu_body").slideDown(500).siblings("li.menu_body").slideUp("slow"); 
          }); 
}); 
</script> 



<div class="menu-container"> 
<ul id="secondpane"> 
<li><a href="#">home</a></li> 
<li class="menu-item"><a href="#">about us</a></li> 
    <li class="menu_body"><ul> 
     <li class="menu-item"><a href="#">testimonials</a></li> 
     <li class="menu-item"><a href="#">full width page</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">blog</a></li> 
    <li class="menu_body"><ul> 
     <li class="menu-item"><a href="#">web design</a></li> 
     <li class="menu-item"><a href="#">illustrations</a></li> 
     <li class="menu-item"><a href="#">art inspiration</a></li> 
    </ul></li> 
<li class="menu-item"><a href="#">portfolio</a></li> 
<li class="menu-item"><a href="#">contact</a></li> 
</ul> 
</div> 

Answer 3

Вы должны изменить код, чтобы быть похожим так:

$(document).ready(function(){ 

    $("#secondpane li.menu-item").hover(function(){ 
     $("li.menu_body").slideUp(500); 
     $(this).next("li.menu_body").slideDown(500); 
    }, function(){ 
     $("li.menu_body").slideUp(500); 
    }); 

});