[CSS + JS] Treemenu

talk open source
1

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

<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