Overview

There are three steps in creating a tree.

1. create the tree which represents the menu.
2. pick a pre-written theme to indicate how the tree should look like.
3. tell the browser to display the tree inside a specific HTML element.

Finally, there is a section that does trouble shooting menu display problems

1. Creating a Tree

You can use the same Menu Builder for JSCookMenu to to build the tree for JSCookTree since their formats are the same. Or you could use the following format to add nodes to the tree.

<SCRIPT LANGUAGE="JavaScript"><!--
var myMenu =
[
    ['icon', 'title', 'url', 'target', 'description'],  // a menu item
    ['icon', 'title', 'url', 'target', 'description'],  // a menu item
    ['icon', 'title', 'url', 'target', 'description',   // a folder item
        ['icon', 'title', 'url', 'target', 'description'],  // a menu item
        ['icon', 'title', 'url', 'target', 'description'],  // a menu item
        ['icon', 'title', 'url', 'target', 'description',   // a folder item
            ['icon', 'title', 'url', 'target', 'description'],  // a menu item
            ['icon', 'title', 'url', 'target', 'description']  // a menu item
        ]
    ]
];
--></SCRIPT>

Note: JSCookTree cannot handle _cmSplit used in JSCookMenu since there are no menu splits in trees.

A folder item contains sub trees. Note that sub trees can be nested. Also, JSCookTree allows a folder item to contain links.

Be careful of the commas. If you missed one between two sibling nodes, both IE and Netscape simply quit parsing the rest. So, if you do not see the menu, this is one place to check.

2. Pick a Theme

In order to use JSCookTree, one needs to define a set of styles for HTML components. Usually, this task is not easy to do from scratch. Fortunately, some themes were provided and can be used as a template. Currently, I designed 4 themes:

• Windows XP
• Library
• Navy

The guide line for definiting new themes will be described separately. Right now, you can just pick a theme, for instance, Windows XP. To load a theme, one needs to do the following:

<SCRIPT LANGUAGE="JavaScript" SRC="/JSCookTree/JSCookTree.js"></SCRIPT>

Then

<LINK REL="stylesheet" HREF="/JSCookTree/ThemeXP/theme.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript" SRC="/JSCookTree/ThemeXP/theme.js"></SCRIPT>

3. Display the Tree

First, one needs to find the place to put the tree. JSCookTree can be assigned to TD, SPAN, DIV as well as other type of HTML elements that have innerHTML property. Here I use a DIV and give it an id named myMenuID.

<DIV ID=myMenuID></DIV>

Then, add a java script command that tells the web browser to display the menu in that element:

<SCRIPT LANGUAGE="JavaScript"><!--
	ctDraw ('myMenuID', myMenu, ctThemeXP1, 'ThemeXP', 0, 0);
--></SCRIPT>

The first parameter is the HTML element id, the second one is the menu tree. ctThemeXP1 is the theme property, 'ThemeXP' is Windows XP theme's prefix. The fifth parameter indicates branch control (0: no branch control; 1: only one branched is opened for the tree; 2: only one branch is opened in the global group). The sixth parameter indicate the default expansion level. Here is what the menu looks like:

Congratulations, you just built the first tree. It does not look very pretty at present since no real interesting stuff has been inserted. Check the demo page for some fancier examples. Although JSCookTree is a tree builder, it does not mean that it cannot be used to create menus. Navy theme is a such demonstration.

4. Trouble Shooting

There are many reasons for not showing the menus.

1. It is possible that the web brower is not supported by JSCookTree. So far I only had chance to test the menu on IE 5.5, IE 6, Netscape 7, Mozilla 1.1, since it is hard to find an older version of web browser. Most features of JavaScript I used were related to DOM technology. Most importantly, both style="display:block" and innerHTML must be supported. As far as I know, both are supported on IE4+ and Netscape 6+. If you have chance to test it on different browsers, please send me the result.
2. Make sure that comma ',' is properly placed in the tree. Although JSCookTree can deal w/ extra commas, lacking of comma would abort the brower's JavaScript interpreter and that is a fatal error.
3. Make sure that ctDraw function is only called after both the menu tree and the HTML element that contains menu have appeared.
4. Make sure that JSCookTree.js is the first thing to load in your HTML <head> section.
5. Make sure that JSCookTree.js has the same version number as the latest. Sometimes I do forget to update the script file in archive directory. Use any text editor to view the first few lines of the file to check the version number.