# \[CSS + JS\] Treemenu

**URL:** <https://forum.kirupa.com/t/css-js-treemenu/158917>\
**Category:** open source\
**Created:** [August 12, 2005, 6:42pm UTC](https://forum.kirupa.com/t/css-js-treemenu/158917 "2005-08-12T18:42:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![icio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/icio/32/484_2.png) [@icio](https://forum.kirupa.com/u/icio)\
**Post date:** [August 12, 2005, 6:42pm UTC](https://forum.kirupa.com/t/css-js-treemenu/158917/1 "2005-08-12T18:42:01Z")

</div>

Here’s really simple script for creating a tree menu using CSS and Js.  
Tested on Firefox 1.0.6 and IE.

```auto
<html>
<head>
	<title>i&copy;io - JavaScript Tree Menu</title>
	<style type="text/css">
		body { background-color: #FFF; font-family: "trebuchet ms", "verdana", "arial", "tahoma"; font-weight: normal; font-size: 12px; }
		ul { margin: 0; padding: 0 0 0 20px; list-style-type: none; }
		li { padding-left: 10px; background-repeat: no-repeat; background-position: 0 5px; }
		.folder_closed { background-image: url("plus.gif"); }
		.folder_closed ul { display: none; }
		.folder_open { background-image: url("minus.gif"); }
		.folder_open ul { display: block; }
		.folder_open .folder_closed ul { display: none; }
		.file { background-image: url("dot.gif"); }
	</style>
	<script language="javascript" type="text/javascript">
		function toggleFolderView(obj) {
			obj = obj.parentNode;
			obj.className = obj.className=="folder_closed"?"folder_open":"folder_closed";
		}
	</script>
</head>
<body>
	<h1>JavaScript Tree Menus</h1>
	This is a little experiment I'm conducting for use in the Administration page of the CMS (Content Management System) that I'm also writing.
	<hr style="border-color: #333;" width="80%" size="1px" align="left" />
	<h2>Tree Menu:</h2>
	<ul>
		<li class="folder_closed"><a onMouseDown="toggleFolderView(this);">Folder 1</a>
			<ul><li class="folder_closed"><a onMouseDown="toggleFolderView(this);">Folder 1.1</a>
					<ul>
						<li class="file">File 1.1.1</li>
						<li class="file">File 1.1.2</li>
						<li class="file">File 1.1.3</li>
					</ul></li>
				<li class="file">File 1.1</li>
				<li class="file">File 1.2</li>
				<li class="file">File 1.3</li>
				<li class="file">File 1.4</li>
				<li class="file">File 1.5</li>
			</ul></li>
		<li class="folder_closed"><a onMouseDown="toggleFolderView(this);">Folder 2</a>
			<ul><li class="folder_closed"><a onMouseDown="toggleFolderView(this);">Folder 2.1</a>
					<ul>
						<li class="file">File 2.1.1</li>
						<li class="file">File 2.1.2</li>
					</ul></li>
				<li class="file">File 2.1</li>
			</ul></li>
		<li class="file">File 1</li>
		<li class="file">File 2</li>
	</ul>
			
</body>
</html>

```

also, shouts to nokrev for helping me out with a little problem. to fill you in - `parentElement` didn’t work in Firefox but nokrev suggested i use `parentNode` :puzzle:

icio
