Collapsable Navigation Menu
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
var menu={
collapseMenu:function(node)
{
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
if (!node) node = document.getElementById("menu");
if (node.childNodes.length > 0)
{
for (var i=0; i<node.childNodes.length; i++)
{
var child = node.childNodes[i];
if (child.nodeName == "UL")
{
child.style.display = "none";
}
menu.collapseMenu(child);
}
}
},
prepareMenu:function()
{
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;
var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++)
{
links[i].onclick = function()
{
menu.toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
return false;
}
}
},
toggleMenu:function(node, link)
{
if (!document.getElementById) return false;
if (!link) return false;
if (!node) location.href = link.href;
if (node.style.display == "")
{
node.style.display = "none";
} else {
node.style.display = "";
}
}
//end menu
}
addLoadEvent(menu.collapseMenu);
addLoadEvent(menu.prepareMenu);
</script>
<title>Example 2</title>
</head>
<body>
<ul id="menu">
<li>Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Onion</li>
<li>Peas</li>
</ul>
</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
var menu={
collapseMenu:function(node)
{
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
if (!node) node = document.getElementById("menu");
if (node.childNodes.length > 0)
{
for (var i=0; i<node.childNodes.length; i++)
{
var child = node.childNodes[i];
if (child.nodeName == "UL")
{
child.style.display = "none";
}
menu.collapseMenu(child);
}
}
},
prepareMenu:function()
{
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;
var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++)
{
links[i].onclick = function()
{
menu.toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
return false;
}
}
},
toggleMenu:function(node, link)
{
if (!document.getElementById) return false;
if (!link) return false;
if (!node) location.href = link.href;
if (node.style.display == "")
{
node.style.display = "none";
} else {
node.style.display = "";
}
}
//end menu
}
addLoadEvent(menu.collapseMenu);
addLoadEvent(menu.prepareMenu);
</script>
<title>Example 2</title>
</head>
<body>
<ul id="menu">
<li>Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Onion</li>
<li>Peas</li>
</ul>
</li>
</ul>
</body>
</html>