Well the idea is to create a tree menu in a webage. Instead of those linear menu it would be better to add more dynamic to your webpage with a tree menu. Others use image rollovers. As expecte the tree menu should behave like the one in Windows Explorer. When you click a node depending on its state it will pull down or pull up its chlid nodes.
I have achieved by exploiting one style sheet property, display. Basically this style sheet property has 3 values: inline, block , list-item and none. We are more interested in the value block and none. The block value displays the content in block form as opposed to inline in which it will display elements in one line. The none value hides the elements but it is not the same witht he visibility: hidden which hides the element but still takes up space in your page.
The javascript part
There are 2 functions for this tree menu to work. The first function is the initNodes() which is used in <body onload="initNodes()". What this function do is to set the all the nodes display to none except the root node so that when the page load only the root node is shown and all the child nodes are hidden. The second function clickNode(id) is responsible in hiding or showing the child node of the node that is being clicked. It takes one function parameter which is the element id of its child node. It uses the chlid node id to set the display to block or none depending on the current state. If the child node current display is none then it will change it to block and vice versa.
CODE
<head>
<script type="text/javascript">
<!--
function initNodes(){
var uls = document.getElementsByTagName("ul");
var i;
for(i = 0; i < uls.length; i++)
if(uls[i].id != "root")
uls[i].style.display = "none";
}
function clickNode(id){
var node = document.getElementById(id);
if(node.style.display == "none")
node.style.display = "block";
else
node.style.display = "none";
return false;
}
-->
</script>
</head>
<script type="text/javascript">
<!--
function initNodes(){
var uls = document.getElementsByTagName("ul");
var i;
for(i = 0; i < uls.length; i++)
if(uls[i].id != "root")
uls[i].style.display = "none";
}
function clickNode(id){
var node = document.getElementById(id);
if(node.style.display == "none")
node.style.display = "block";
else
node.style.display = "none";
return false;
}
-->
</script>
</head>
The HTML Code
I used <ul></ul> (unordered list) tag becuase you dont need to indent it. If you want more styles you could use <div></div> container tag and you will have to indent it yourself depending on the level of the nodes. But I suggest you use the <ul></ul>, just apply some styles on it to fit your desired look like putting some icons which will change when the its child node of a node is hidden or not. This can be achieved by putting an image just before the nodes name and using the javascript rollover technique to change the image source. Like in windows explorer when you click a node the image changes from a normal folder to an open folder or vice versa. But for the simplicty of this discussion I did not include it. I might loss interest and not be able to finnish this one.
CODE
<body onload="initNodes()">
Example of a tree menu
<ul id="root">
<li><a href="" onclick="return clickNode('r1n1')">Root 1</a>
<ul id="r1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
</ul>
</li>
<li><a href="" onclick="return clickNode('r2n1')">Root 2</a>
<ul id="r2n1">
<li><a href="" onclick="return clickNode('r2n1n1')">Node 1</a>
<ul id="r2n1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li>Node 4
</li>
<li>Node 5
</li>
<li>Node 6
</li>
<li>Node 7
</li>
<li>Node 8
</li>
<li>Node 9
</li>
</ul>
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li><a href="" onclick="return clickNode('r2n4n1')">Node 4</a>
<ul id="r2n4n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li><a href="" onclick="return clickNode('r2n4n1n3')">Node 3</a>
<ul id="r2n4n1n3">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li>Node 4
</li>
</ul>
</li>
</ul>
</li>
<li>Node 5
</li>
</ul>
</li>
</ul>
using style sheet and javascript.
</body>
Example of a tree menu
<ul id="root">
<li><a href="" onclick="return clickNode('r1n1')">Root 1</a>
<ul id="r1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
</ul>
</li>
<li><a href="" onclick="return clickNode('r2n1')">Root 2</a>
<ul id="r2n1">
<li><a href="" onclick="return clickNode('r2n1n1')">Node 1</a>
<ul id="r2n1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li>Node 4
</li>
<li>Node 5
</li>
<li>Node 6
</li>
<li>Node 7
</li>
<li>Node 8
</li>
<li>Node 9
</li>
</ul>
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li><a href="" onclick="return clickNode('r2n4n1')">Node 4</a>
<ul id="r2n4n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li><a href="" onclick="return clickNode('r2n4n1n3')">Node 3</a>
<ul id="r2n4n1n3">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li>Node 4
</li>
</ul>
</li>
</ul>
</li>
<li>Node 5
</li>
</ul>
</li>
</ul>
using style sheet and javascript.
</body>
If you want to see how it works, I have created a working tree page as an example. Just click here for the test page of a tree menu.
Maybe next time I will add the icons on each node which will show the state of the nodes. But for now that will be all coz Im getting bored again.
