Javascript DropDown菜单

Question

我希望实现这样的菜单

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

是否有人可以重新启动jquery或其他任何与上述网站相同的JavaScript库的插件？

Answer 1

jQuery Accordion 就是这样做的。

您可以使用此代码（来自jQuery Accordion页面）进行试用：

目：

<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 2

使用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 3

JQuery有几个Menu插件

• 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非常容易。

Answer 4

我曾尝试使用jquery插件，但这并不符合我的要求。

但是，我可以通过从其他网站复制JS和CSS来使其工作：

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