I am new to web development, and I was searching the way to do it, every other website has tons of code with no readability, which I assume every beginner won’t like. After much of googling and trying, I finally made something very basic, I hope it will help many other starters like me :-
menu.html
<html>
<head>
<title> browsable tree menu </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” src=”jsmenu.js”></script>
</head>
<body>
<h1> Tree structure </h1>
<ul id=”main”>
<li>
Home
<ul>
<li><a href=”http://www.google.com”>Google home</a></li>
<li><a href=”http://www.yahoo.com”>Yahoo home</a></li>
</ul>
</li>
<li>
Office
<ul>
<li><a href=”http://www.oracle.com”>Oracle</a></li>
<li><a href=”http://www.microsoft.com”>Microsoft</a></li>
</ul>
</li>
<li>
Browsers
<ul>
<li><a href=”http://www.mozilla.com/firefox”>Firefox</a></li>
<li><a href=”http://www.google.com/chrome”>Chrome</a></li>
</ul>
</li>
</ul>
</body>
</html>
jsmenu.js
window.onload=rollup;
function rollup()
{
var objNode, objAnchor;
// Check we’re working with a DOM compliant browser
if (document.getElementById && document.createElement)
{
var objMenu = document.getElementById(‘main’);
var objNested = objMenu.getElementsByTagName(‘ul’);
// Hide each of the nested unordered list
for (var i=0; i<objNested.length; i++)
{
objNested[i].style.display = ‘none’;
// Place the top-level text in an anchor tag
objNode = objNested[i].parentNode;
strContent = objNode.firstChild.data;
objAnchor = document.createElement(‘a’);
objAnchor.href = ‘#’;
objAnchor.onclick = function () { return rollout(this); }
objAnchor.appendChild(document.createTextNode(strContent));
objNode.replaceChild(objAnchor, objNode.firstChild);
}
}
}
function rollout(obj) {
if (obj.nextSibling.style.display == ‘block’ ) {
obj.nextSibling.style.display = ‘none’;
} else {
obj.nextSibling.style.display = ‘block’ ;
}
return false; // stop browser from requesting the link
}
