Folder Navigation is a curtesy of WebFX
See Original Here

[Tell A Friend]

This is a cross browser version of my old Folder Navigation scrip.
Currently there's a few minor problems when used in netscape, but I'm working on it
It supports unlimited number of folders, levels and documents.

To use this include this lien in your header tag.

<script src="foldernav.js" type="text/javascript"></script>

Then you'll need to make the html code for the menu, below is an example.

<div ID="mParent" class="parent">
<a name="ma" href="#" onClick="FolderExpand('m','top')">
<img name="mTree" src="images/topopen.gif" class="icon" align="absmiddle" 
border="0"><font
color="black" size="2" class="item">Top Level</font></a>
</div>

<div ID="mChild">

<div ID="m1Parent" class="parent"><a name="m1a" href="#" 
onClick="FolderExpand('m1')"><img name="m1Tree" src="images/Tplus.gif" 
align="absmiddle" border="0"><img name="m1Folder" src="images/foldericon.gif" 
class="icon" align="absmiddle" border="0"><font color="black" 
size="2" class="item">Folder 1</font></a></div>
<div ID="m1Child" CLASS="child">
	<div ID="m3Parent" class="parent"><a name="m3a" href="#" 
	onClick="FolderExpand('m3')"><img src="images/I.gif" align="absmiddle" 
	border="0"><img name="m3Tree" src="images/Tplus.gif" align="absmiddle" 
	border="0"><img name="m3Folder" src="images/foldericon.gif" class="icon" 
	align="absmiddle" border="0"><font color="black" size="2" 
	class="item">Folder 3</font></a></div>
	<div ID="m3Child" CLASS="child">
		<div ID="m4Parent" class="parent"><a name="m4a" href="#" 
		onClick="FolderExpand('m4')"><img src="images/I.gif" align="absmiddle" 
		border="0"><img src="images/I.gif" align="absmiddle" 
		border="0"><img name="m4Tree" src="images/Tplus.gif" 
		align="absmiddle" border="0"><img name="m4Folder" 
		src="images/foldericon.gif" class="icon" align="absmiddle" 
		border="0"><font color="black" size="2" class="item">
		Folder 4</font></a></div>
		<div ID="m4Child" CLASS="child">
			<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
			align="absmiddle"><img src="images/I.gif" align="absmiddle"><
			img src="images/T.gif" align="absmiddle"><img src="images/htmlicon.gif" 
			align="absmiddle" class="icon"><a class="item" href="#">
			Document 1</a><br>
			<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
			align="absmiddle"><img src="images/I.gif" align="absmiddle"><
			img src="images/T.gif" align="absmiddle"><img src="images/htmlicon.gif" 
			align="absmiddle" class="icon"><a class="item" href="#">
			Document 2</a><br>
			<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
			align="absmiddle"><img src="images/I.gif" align="absmiddle"><
			img src="images/L.gif" align="absmiddle"><img src="images/htmlicon.gif" 
			align="absmiddle" class="icon"><a class="item" href="#">
			Document 3</a><br>
		</div>
		<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
		align="absmiddle"><img src="images/T.gif" align="absmiddle"><
		img src="images/htmlicon.gif" align="absmiddle" class="icon"><a class="
		item" href="#">Document 1</a><br>
		<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
		align="absmiddle"><img src="images/T.gif" align="absmiddle"><
		img src="images/htmlicon.gif" align="absmiddle" class="icon"><a class="
		item" href="#">Document 2</a><br>
		<img src="images/I.gif" align="absmiddle"><img src="images/I.gif" 
		align="absmiddle"><img src="images/L.gif" align="absmiddle"><
		img src="images/htmlicon.gif" align="absmiddle" class="icon"><a class="
		item" href="#">Document 3</a><br>
	</div>
	<img src="images/I.gif" align="absmiddle"><img src="images/T.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 1</a><br>
	<img src="images/I.gif" align="absmiddle"><img src="images/T.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 2</a><br>
	<img src="images/I.gif" align="absmiddle"><img src="images/L.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 3</a><br>
</div>

<div ID="m2Parent" class="parent"><a name="m2a" href="#" 
onClick="FolderExpand('m2','last')"><img name="m2Tree" src="images/Lplus.gif" 
align="absmiddle" border="0"><img name="m2Folder" src="images/foldericon.gif" 
class="icon" align="absmiddle" border="0"><font color="black" size="2" 
class="item">Folder 2</font></a></div>
<div ID="m2Child" CLASS="child">
	<img src="images/white.gif" align="absmiddle"><img src="images/T.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 1</a><br>
	<img src="images/white.gif" align="absmiddle"><img src="images/T.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 2</a><br>
	<img src="images/white.gif" align="absmiddle"><img src="images/L.gif" 
	align="absmiddle"><img src="images/htmlicon.gif" align="absmiddle" 
	class="icon"><a class="item" href="#">Document 3</a><br>
</div>

</div>

that will look like this:

Click here to download the images, script
file and the sample above in a zip files.