 Web Page Tree Menu: Style Sheet - Javascript |
|
|
|
|
  |
 Mar 2 2007, 01:57 AM
Post
#1
|
|
|
Premium Member  Group: Members Posts: 165 Joined: 12-September 05 Member No.: 11,777  |
I got bored and lazy working on the things that I should do... so I end up creating this tree menu for anyone to use if they find it interesting.
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> 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> 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. |
 |
 
|
|
Mar 29 2008, 08:54 PM
Post
#2
|
|
|
Guest Feedbacks Group: Members Posts: 2,360 Joined: 21-September 07 Member No.: 50,369 |
*************GOODONE****************
Web Page Tree Menu: Style Sheet - Javascript Nice and simple way to get a tree control ...Keep it up -reply by madhan |
|
|
|
|
Apr 2 2008, 05:02 AM
Post
#3
|
|
|
Guest Feedbacks Group: Members Posts: 2,360 Joined: 21-September 07 Member No.: 50,369 |
Thanks
Web Page Tree Menu: Style Sheet - Javascript Nice code. This is the exact thing I was looking for. Thank you for making it clean and easy to recycle. You've saved me a bunch of time and helped me organize a massive hierarchy of files that I have. -reply by William |
|
|
|
|
Apr 4 2008, 06:55 PM
Post
#4
|
|
|
Guest Feedbacks Group: Members Posts: 2,360 Joined: 21-September 07 Member No.: 50,369 |
Single Node Expansion
Web Page Tree Menu: Style Sheet - Javascript How could we adjust the code so that only single node could be expanded at one time? -question by Dan Kunes |
|
|
|
|
May 2 2008, 02:46 PM
Post
#5
|
|
|
Guest Feedbacks Group: Members Posts: 2,360 Joined: 21-September 07 Member No.: 50,369 |
How to make menu stay explore on page refresh?
Web Page Tree Menu: Style Sheet - Javascript How to make menu stay explore on page refresh? The problem comes when we need to do explored menu, when one of menu item has pushed and the page refresh. This is important, when visitor has choosen meniu item and gets it content, but the meniu has colapsed and it must be explore again... Everythink else is great! -feedback by Non commercial |
|
|
|
|
May 7 2008, 07:48 AM
Post
#6
|
|
|
Guest Feedbacks Group: Members Posts: 2,360 Joined: 21-September 07 Member No.: 50,369 |
Aligning child menu
Web Page Tree Menu: Style Sheet - Javascript I had created a Vertical parent menu named as Products and its child menu are rice and paddy. I had aligned the parent menu but the child could not able to align the rice and paddy resply.Menu's are created through coffe cup menu maker and edited through dreamweaver. So please if any body have the code reply me soon ASAP. -question by nambi |
|
|
|
|
Similar Topics