Posted By

dmosher on 06/05/08

Tagged

Versions (?)

Last Edited at 06/05/08 11:24am

Statistics

Viewed 1943 times

Favorited by 15 user(s)

Related snippets

jQuery Accordian Menu

/ Published in: JavaScript

You'll need to download the latest version of jQuery for this to work, as it is linked in the tag. CSS/XHTML included.

Highlighted TextExpand

<div id="navigation">
			<ul id="navroot">
				<li>
					<a href="#">Root 1</a>
					<ul class="navchild">
						<li><a href="#">Sub 1</a></li>
						<li><a href="#">Sub 2</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 2</a>
					<ul class="navchild">
						<li><a href="#" class="child">Child 1</a></li>
						<li><a href="#" class="child">Child 2</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 3</a>
					<ul class="navchild">
						<li>
							<a href="#">Child 1</a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
						<li>
							<a href="#" >Child </a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 4</a>
					<ul class="navchild">
						<li><a href="#">Child 1</a></li>
						<li><a href="#">Child 2</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		<div id="message">
		</div>

body {
	margin: 0;
	padding: 0;
}

#navigation {
	float: left;
    width: 200px;
    background: #333;
    padding: 20px;
}

#navigation li, ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#navigation li a {
    display: block;
    color: #fff;
    width: 100px;
    padding: 5px;
	text-decoration: none;
}

#navroot > li > a {
	background: #000;
}

.navchild li a {
	background: #666;
}

.navgrandchild li a {
	background: #999;
}

#message {
	float: left;
	background: #666;
	padding: 20px;
	font-size: 2.0em;
	color: #fff;
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.