Collapsible Menu

Updated on 11/6/2010 because of a selector bug in jQuery 1.4.3.

A simple, yet attractive sliding menu. With jQuery, the menu can slide, fade, grow, appear and allow only one instance expanded at a time, which is where the true beauty of this script lies. The HTML is virtually identical in each example, so the sample code below only includes one of the lists. The element id needs to be modified to use the other jQuery samples. The expand and collapse icons are for expanding and collapsing all menu items.

Download

Demo

Images

HTML

<a class="expand_all"><img src="/wp-content/uploads/2010/06/expand.gif" alt="" /></a> <a class="collapse_all"><img src="/wp-content/uploads/2010/06/collapse.gif" alt="" /></a>
<ul id="menu1" class="example_menu">
	<li><a class="expanded">Section A</a>
		<ul>
			<li><a href="#">Link A-A</a>
				<ul>
					<li><a href="#">Link A-A-A</a></li>
					<li><a href="#">Link A-A-B</a></li>
				</ul>
			</li>
			<li class="active"><a href="#">Link A-B</a></li>
			<li><a href="#">Link A-C</a></li>
			<li><a href="#">Link A-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
	<li><a class="collapsed">Section B</a>
		<ul>
			<li><a href="#">Link B-A</a>
				<ul>
					<li><a href="#">Link B-A-A</a></li>
					<li><a href="#">Link B-A-B</a></li>
					<li><a href="#">Link B-A-C</a></li>
				</ul>
			</li>
			<li><a href="#">Link B-B</a>
				<ul>
					<li><a href="#">Link B-B-A</a></li>
					<li><a href="#">Link B-B-B</a></li>
				</ul>
			</li>
			<li><a href="#">Link B-C</a></li>
			<li><a href="#">Link B-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
	<li><a class="collapsed">Section C</a>
		<ul>
			<li><a href="#">Link C-A</a></li>
			<li><a href="#">Link C-B</a></li>
			<li><a href="#">Link C-C</a></li>
			<li><a href="#">Link C-D</a></li>
		</ul>
	</li>
	<li class="footer"><span> </span></li>
</ul>

JavaScript

$(document).ready(function() {
	// Expand/Collapse All
	$('#example1 .expand_all').click(function() {
		$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
	});
	$('#example1 .collapse_all').click(function() {
		$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
	});
	// Slide
	$("#menu1 > li > a.expanded + ul").slideToggle("medium");
	$("#menu1 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
	});

	// Fade
	$("#menu2 > li > a.expanded + ul").fadeIn("normal");
	$("#menu2 > li > a").click(function() {
		var el = $(this).parent().find('> ul');

		if($(this).hasClass("collapsed"))
			$(el).fadeIn('normal');
		else
			$(el).fadeOut('normal');

		$(this).toggleClass("expanded").toggleClass("collapsed");
	});

	// Grow/Shrink
	$("#menu3 > li > a.expanded + ul").show("normal");
	$("#menu3 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').toggle("normal");
	});

	// Appear/Disappear
	$("#menu4 > li > a.expanded + ul").show();
	$("#menu4 > li > a").click(function() {
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').toggle();
	});

	// Accordion
	$("#menu5 > li > a.expanded + ul").slideToggle("medium");
	$("#menu5 > li > a").click(function() {
		$("#menu5 > li > a.expanded").not(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
		$(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("medium");
	});
});

CSS

.example_menu {
	font-size: 90%;
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 136px;
}
.expand_all,
.collapse_all {
        cursor: pointer;
}
.example_menu ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li {
	background-image: none;
	margin: 0;
	padding: 0;
}
.example_menu ul ul {
	display: block;
}
.example_menu ul ul li a {
	padding-left: 20px;
	width: 109px;
}
.example_menu a {
	color: #000;
	cursor: pointer;
	display: block;
	font-weight: bold;
	margin-left: 0;
	padding: 2px 2px 2px 17px;
	width: 112px;
}
.example_menu a.expanded {
	background: #bbb url('collapse.gif') no-repeat 3px 50%;
}
.example_menu a.collapsed {
	background: #bbb url('expand.gif') no-repeat 3px 50%;
}
.example_menu a:hover {
	text-decoration: none;
}
.example_menu ul a {
	background: #e8e8e8;
	border-top: 2px solid #fff;
	color: #000;
	display: block;
	font-weight: normal;
	padding: 2px 2px 2px 10px;
	width: 119px;
}
.example_menu ul a:link {
	font-weight: normal;
}
.example_menu ul a:hover {
	background : #f5f5f5;
	text-decoration: underline;
}
.example_menu li.active a {
	background: #fff;
}
.example_menu li.active li a {
	background: #e8e8e8;
}
#menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer {
	background: transparent url('footer.jpg') no-repeat 0 0;
	border-top: 2px solid #fff;
	height: 9px;
	line-height: 15px;
	margin: 0 0 10px 0;
	width: 131px;
}
.example_menu .footer span {
	display: none;
}