<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expandable Menus Demo (johnzeratsky.com)</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
span.expandLink {
font-size: 70%;
color: #333; }
span.expandLink a {
color: #333; }
-->
</style>
<script type="text/javascript">
function toggleSub(submenu) {
if (document.getElementById(submenu).style.display == 'none') {
document.getElementById(submenu).style.display = 'block'
} else {
document.getElementById(submenu).style.display = 'none'
}
}
</script>
</head>
<body>
<div id="sitenav">
<h1>Expandable Menu Demo</h1>
<h2>Foods you grow</h2>
<ul>
<li>
<a href="#">Vegetables</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('vegMore'); return false">toggle</a>)</span>
<ul id="vegMore" style="display: none;">
<li><a href="#">Celery</a></li>
<li><a href="#">Carrots</a></li>
<li><a href="#">Broccoli</a></li>
</ul>
</li>
<li>
<a href="#">Fruits</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('fruitMore'); return false">toggle</a>)</span>
<ul id="fruitMore" style="display: none;">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Tomato?</a></li>
</ul>
</li>
<li>
<a href="#">Other</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('otherMore'); return false">toggle</a>)</span>
<ul id="otherMore" style="display: none;">
<li><a href="#">Mushrooms</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Salmon</a></li>
</ul>
</li>
<li><a href="#">Tips for Growing</a></li>
<li>
<a href="#">Contact</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('contactMore'); return false">toggle</a>)</span>
<ul id="contactMore" style="display: none;">
<li><a href="#">em***@email.com</a></li>
<li>(608) 555-1234</li>
</ul>
</li>
</ul>
</div>
<!-- end sitenav -->
</body>
</html>
