的Javascript下拉菜单

Question

我一直在寻找实现这样的菜单

http://www.fogcreek.com/FogBugz/learnmore.html（左手侧）

任何人都可以重新开始一些插件的jQuery或任何其他JavaScript库，其行为与上面相同的网站？

Answer 1

我曾尝试jQuery插件，它不符合我的要求。

但是，我能够做它的工作原理，通过从其他网站复制JS和CSS：

http://jstock.sourceforge.net/features.html

Answer 2

jQuery Accordion这样做。

您可以使用此代码（从jQuery手风琴页）尝试一下：

头：

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#accordion").accordion(); 
}); 
</script> 

身体：

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div>Mauris mauris ante</div> 
    <h3><a href="#">Section 2</a></h3> 
    <div>Sed non urna</div> 
    <h3><a href="#">Section 3</a></h3> 
    <div>Nam enim risus </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div>Cras dictum</div> 
</div> 

Answer 3

使用jQuery，我有这样的脚本我使用：

$(document).ready(function() { 
    $(".nav > li > a").click(function() { 
     $("ul", $(this).parent()).slideToggle("normal"); 
     return false; 
    }); 
    $(".nav ul").hide(); // Hide all on load. Done here rather than in CSS so users 
    // see the menu if they have javascript disabled. 
}); 

菜单在HTML中标记为：

<ul class="nav"> 
    <li><a href="#">Header</a></li> 
    <li> 
      <ul> 
       <li>Sub list Items</li> 
       <!-- More --> 
      </ul> 
    </li> 
</ul> 

对于每个可展开部分。

Answer 4

jQuery有几个菜单插件

• http://css-tricks.com/simple-jquery-dropdowns/
• http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/
• http://www.search-this.com/2009/03/17/jquery-dropdown-menu/
• http://css-tricks.com/simple-jquery-dropdowns/

还有更多。我为我的网站写了我自己的。 jQuery非常简单。