的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非常簡單。