Javascript DropDown Menu

Question

I was looking to implement such menu as

http://www.fogcreek.com/FogBugz/learnmore.html (Left hand side)

Can anyone recommence some plug-in for jquery, or any other JavaScript library which behave same as above site?

Answer 1

I had tried the jquery plug-in, it doesn't fit my requirement.

However, I am able to make it works, by copying JS and CSS from other sites :

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

Answer 2

JQuery has several Menu plugins

• 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/

There are more. I wrote my own for my website. It's very easy with jQuery.

Answer 3

jQuery Accordion does that.

You can use this code (from the jQuery Accordion page) to try it out:

Head:

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

Body:

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

Using jQuery, I have this script which I use:

$(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.
});

The menu is marked up in HTML as:

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

for each expandable section.