如何對儀表板的菜單進行分組和動畫

Question

我有一個儀表板，其中的左側面板中有菜單。現在我想要的是菜單可以分組在一個主菜單下可能有兩個或三個菜單等，菜單也應該是動畫能力。這裏是圖片來說明我想要的。

這裏是負責

#doclist { 
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(98%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.16))); 
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%); 
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%); 
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%); 
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#29000000', GradientType=1); 
    width:14%; 
    overflow: auto; 
    border-right: solid 1px #ddd; 
    padding: 10px; 
    float: left; 
} 
#doclist ul { 
    margin:0; 
    list-style:none; 
} 
#doclist li { 
    margin:0; 
    padding:0 0 4px 16px; 
    font-weight: bold; 
    line-height:19px; 
    background: url(../images/right-arrow.png) no-repeat 0 2px; 
} 
#doclist li a { 
    color: #000; 
    text-decoration: none; 
} 
#doclist li a:hover { 
    color: #0080FF; 
} 
#documents { 
    margin:0; 
    padding:0; 
} 

和HTML部分

<div id="main"> 
    <div id="doclist" style="background-color: #fceabb"> 
     <ul id="documents"> 
      <li><a href="javascript:void(0);" rel="home" title="Home.jsp">Home</a></li> 
      <li><a href="javascript:void(0);" rel="details" title="forms/search" id="search">search</a></li>      
      <li><a href="javascript:void(0);" rel="newcaller_details" title="forms/newcaller">New Caller</a></li> 
      <li><a href="javascript:void(0);" rel="newsim_details" title="forms/newsim">Newsim</a></li> 

     </ul> 
    </div> 

Answer 1

trye這個jQuery解決方案的CSS http://jsfiddle.net/7zav5/2/

下面添加CSS

#documents li ul{ 
    display:none; 
} 

和腳本jQuery庫

$(document).ready(function(e) { 
    $('#documents li ').hover(function(){ 
     $(this).children('ul').clearQueue(); 
     $(this).children('ul').slideDown(); 
    }, 
    function(){ 
     $(this).children('ul').clearQueue(); 
     $(this).children('ul').slideUp(); 
    }) 
});