Return to Snippet

Revision: 2466
at February 25, 2007 19:50 by soxiam


Initial Code
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
	<title>DL Demo</title>
	<script src="http://jquery.com/src/jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("dd:not(:first)").hide();
		$("dt a").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});
	</script>
	<style>
	body { font-family: Arial; font-size: 16px; }
	dl { width: 300px; }
	dl,dd { margin: 0; }
	dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
	dt a { color: #FFF; }
	dd a { color: #000; }
	ul { list-style: none; padding: 5px; }
	</style>
</head>

<body>
<dl>
	<dt><a href="/">jQuery</a></dt>
	<dd>
	<ul>
		<li><a href="/src/">Download</a></li>
		<li><a href="/docs/">Documentation</a></li>
		<li><a href="/blog/">Blog</a></li>

	</ul>
	</dd>
	<dt><a href="/discuss/">Community</a></dt>
	<dd>
	<ul>
		<li><a href="/discuss/">Mailing List</a></li>
		<li><a href="/tutorials/">Tutorials</a></li>

		<li><a href="/demos/">Demos</a></li>
		<li><a href="/plugins/">Plugins</a></li>
	</ul>
	</dd>
	<dt><a href="/dev/">Development</a></dt>
	<dd>
	<ul>

		<li><a href="/src/">Source Code</a></li>
		<li><a href="/dev/bugs/">Bug Tracking</a></li>
		<li><a href="/dev/recent/">Recent Changes</a></li>
	</ul>
	</dd>
</dl>
</body>
</html>

Initial URL

                                

Initial Description

                                

Initial Title
jquery collapsible sidebar menu

Initial Tags
javascript, navigation, jquery

Initial Language
Other