"One-At-A-Time" Collapsing Navigation

Also available in a many-at-a-time configuration.

This page demonstrates the collapsing navigation in a stylized manner. Want to see it in the raw? Check out the basic code demonstration.

Insert this javascript in the head of your HTML page. Also, grab a copy of jQuery and make sure this code is pointing to that file as well.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function collapsing_nav() {
	$("body").addClass("enhanced");
	$("#collapsing-nav > li:first").addClass("selected");
	$("#collapsing-nav > li").not(":first").find("ul").hide();
	$("#collapsing-nav > li span").click(function() {
		if ($(this).parent().find("ul").is(":hidden")) {
			$("#collapsing-nav ul:visible").slideUp("fast");
			$("#collapsing-nav > li").removeClass("selected");
			$(this).parent().addClass("selected");
			$(this).parent().find("ul").slideDown("fast");
		}
	});
}
$(collapsing_nav);
</script>

Use this HTML code, or something similar.

<ul id="collapsing-nav">
	<li><span>Main Nav One</span>
		<ul>
			<li><a href="#">Sub Nav One</a></li>
			<li><a href="#">Sub Nav Two</a></li>
			<li><a href="#">Sub Nav Three</a></li>
		</ul>
	</li>
	<li><span>Main Nav Two</span>
		<ul>
			<li><a href="#">Sub Nav One</a></li>
			<li><a href="#">Sub Nav Two</a></li>
			<li><a href="#">Sub Nav Three</a></li>
		</ul>
	</li>
	<li><span>Main Nav Three</span>
		<ul>
			<li><a href="#">Sub Nav One</a></li>
			<li><a href="#">Sub Nav Two</a></li>
			<li><a href="#">Sub Nav Three</a></li>
		</ul>
	</li>
</ul>

Finally, these are the raw CSS styles that you'll need to complete the effect. Customize these however you see fit. This page is just one example of what you can do.

<style type="text/css">
	ul#collapsing-nav li a {
		color: #00f;
		text-decoration: underline;
	}

	ul#collapsing-nav li a:hover {
		color: #f00;
	}

	body.enhanced ul#collapsing-nav span {
		color: #00f;
		text-decoration: underline;
	}

	body.enhanced ul#collapsing-nav span:hover {
		color: #f00;
		cursor: pointer;
	}

	body.enhanced ul#collapsing-nav li.selected span,
	body.enhanced ul#collapsing-nav li.selected span:hover {
		color: #000;
		cursor: default;
		text-decoration: none;
	}
</style>

Download these code examples. (24KB zip file)