Collapsible Menus

Tom McFarlin
License. GPL and MIT

Summary

Collapsible Menus for jQuery is a plugin that makes it easy to create collapsible menus using nested, unordered lists.

How To

1. Include jQuery

Make sure that jQuery is included on your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

2. Include Collapsible Menu

Add the plugin to your page:

<script type="text/javascript" src="jquery.collapsible-menus.min.js"></script>

3. Write Your Markup

Collapsible Menus is meant to be used with nested unordered menus. To get started, create an unordered list and give it an ID:

<ul id="menu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Next, add a nested, unordered list to one of the list items:

<ul id="menu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>
		<ul>
			<li>Nested Item 1</li>
			<li>Nested Item 2</li>
			<li>Nested Item 3</li>
		</ul>
	</li>
	<li>Item 3</li>
</ul>

4. Enable the plugin

In the JavaScript for your site, pass the ID of the menu to which you want to convert to a collapsible menu:

$(function() {
	$('#menu').collapsible();
});

Here's an example of the two parameters the plugin supports:

$(function() {
	$('#menu').collapsible({
		effect: 'none',				// The effect to use when expanding and collapsiing the menu. Accepts none, slide, or fade. Default: none.
		initialCollapse: true		// When true, collapses the menu when the page loads. Default: true
	});
});

Additional Notes

When a nested menu has been expanded, the parent ul will have the class expanded-menu; otherwise, the nested ul will have the class collapsed-menu.

Changelog

1.1 (2012.12.20)

Collapsible Menus now throws an exception if it's called on an element that does not have an attribute
Processed and minified using JSLint
Verifying compatibility with jQuery 1.8.3

1.0 (2012.04.16)

Official release

0.2 (2012.04.09)

Adding support for multiple collapsible menus per page

0.1 (2012.04.07)

Initial Release

tommcfarlin/Collapsible-Menus