Web Page Tree Menu: Style Sheet - Javascript

saga · March 2, 2007

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.

<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.

<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>

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.
Edited April 28, 2012 by moderator (see edit history)

iGuest · March 29, 2008

*************GOODONE****************

Web Page Tree Menu: Style Sheet - Javascript

Nice and simple way to get a tree control ...Keep it up

-reply by madhan

iGuest · April 2, 2008

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

iGuest · April 4, 2008

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

iGuest · May 2, 2008

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

iGuest · May 7, 2008

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

iGuest · July 23, 2008

Hey the code is perfect, but I need a suggestion regarding the ie7 browser activex bypass, coz I'm trying to create my own web with very similar menu- firefox accepts it perfectly, but when opening with ie7 the message appears- website is trying to run activex on your computer and I need to turn it off, this is the mess, I believe it will not be very comfortible for the visitors...Anyone has any ideas how to change the code so to bypass this ie7 bug?Thanx in advance:))-reply by makenas

iGuest · April 18, 2009

infinite parent child tree javascriptWeb Page Tree Menu: Style Sheet - Javascript

hello

I want infinite child tree. Every time I click on + sign there should be one more and more , for every plus sign there should be one more number, if not possible number, it can be any image.

thanking you

pavi

iGuest · April 19, 2011

This is EXACTLY what I was looking for. It is far and away superior to a lot of commercial things I was even looking at.Thanks *so* much!!

mrdee · April 25, 2011

I would be very interested to see the menu in action.However, when I click on the link you provided I am greeted with a 404 error (The page you are looking for cannot be found).Have you changed something or removed it?Like I said, I would love to check it out.(Just noticed the original post is a few years old, however, the person who posted last, less than a week ago, seems to have ran the script).I shall try to copy and paste the Java and HTML and see if I have any luck.OK, I tried that and it works.It does indeed look good.I will try, if I need to, to post here if I have any further questions, eg. for customising the script and things like that (since, as I mentioned before, the original post is quite old).Great job, though.Keep up the good work.

Edited April 25, 2011 by mrdee (see edit history)

Sign In

Web Page Tree Menu: Style Sheet - Javascript

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information