JS-TreeMenu

Demonstration

Introduction

Use this script to create Explorer-like tree-menus (see examples on the left). You can create floating* and non-floating menus. The script was tested with the following operating systems and browsers:

Windows XP:	IE 6, NN 7, Opera 7 + 9, Firefox 2
Mac OS X:	IE 5, Safari 1

If you use another browser or operating system, this script may not work for you - sorry.

* With Safari 1 (Mac OS X) performance was poor, i.e. floating speed was slow. With IE 5 (Mac OS X) floating didn't work properly.

Usage

First, insert this line into your HTML body where you want the menu to appear:

<script language="JavaScript" src="treemenu.js"></script>

Then create a new instance of the TREEMENU-class:

var menu = new TREEMENU();

If you want to open all folders at start (completely open tree), use this syntax instead:

var menu = new TREEMENU(true);

By the way, you can create as many menus as you want.

Now insert your menu items (level, text, [URL], [target], [JavaScript]):

menu.entry(1, "item 1", "page1.htm", "parent.main");
menu.entry(2, "item 1.1", "page1-1.htm", "blank");
menu.entry(2, "item 1.2", "", "", "alert('You clicked menu item 1.2')");
...

level	is the horizontal position of the item within the tree structure. Example: - item 1 level 1 - - item 1.1 level 2 - - item 1.2 level 2 - - - item 1.2.1 level 3 - - - item 1.2.2 level 3 - - item 1.3 level 2 - item 2 level 1
text	is the item name.
URL	is the web address of for instance another page where you want the item to link to. This argument is optional.
target	can be another window (e.g. "blank", "myPopup") or, if you are using framesets, the target frame (e.g. "parent.main", "top.myFrame"). This argument is optional, but note that if you set URL without a target, the window or frame containing the tree-menu will be the target!
JavaScript	can contain any JavaScript code that will be executed when the item is clicked. This argument is optional.

Finally, adapt the configuration to your needs and create the menu:

menu.floating = true;
menu.width = 200;
menu.bgColor = "#F0F0F0";
menu.itemWrap = true;
menu.itemBold = true;
...
menu.create();

Please have a look at the script (configuration section) for more detailed information.

Inside your HTML code, you can also use the function jumpTo() to link menu items externally. Example:

Go to menu item 1.3.2.1

<a href="javascript:menu.jumpTo(1, 3, 2, 1)">Go to menu item 1.3.2.1</a>

It's also possible to open or close the complete tree-menu with the functions open() and close(). Example:

open all | close all

<a href="javascript:menu.open()">open all</a>
<a href="javascript:menu.close()">close all</a>

Hint: You should have a look at the source code of this page to see how tree-menus are created. ;-)