Overview

There are three steps in creating a menu.

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

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

1. Creating a Menu

You can use the Menu Builder to build the menu if you just want a general purpose menu, or you could use the following format to add nodes to a menu.

<SCRIPT LANGUAGE="JavaScript"><!--
var myMenu =
[
    ['icon', 'title', 'url', 'target', 'description'],  // a menu item
    ['icon', 'title', 'url', 'target', 'description'],  // a menu item
    _cmSplit,
    ['icon', 'title', 'url', 'target', 'description',   // a folder item
        ['icon', 'title', 'url', 'target', 'description'],  // a menu item
        _cmSplit,
        ['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>

To use a horizontal/vertical menu split, simply put _cmSplit inside the menu tree in place of the usual menu item. JSCookMenu would then automatically determine that if it should be horizontal or vertical. It is that simple :)

A folder item contains sub menus. Note that sub menus can be nested. Also, JSCookMenu 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 JSCookMenu, 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:

• Office XP
• Internet Explorer
• Panel
• Mini Black

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

<SCRIPT LANGUAGE="JavaScript" SRC="/~heng/JSCookMenu/JSCookMenu.js"></SCRIPT>

Then

<LINK REL="stylesheet" HREF="/~heng/JSCookMenu/ThemeOffice/theme.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript" SRC="/~heng/JSCookMenu/ThemeOffice/theme.js"></SCRIPT>

3. Display the Menu

First, one needs to find the place to put the menu. JSCookMenu 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"><!--
	cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></SCRIPT>

The first parameter is the HTML element id, the second one is the menu tree. 'hbr' indicates that the menu should be displayed horizontally, and the submenu is at the lower (b) right (r) position. cmThemeOffice is Office XP theme property, and 'ThemeOffice' is Office XP theme's prefix. Here is what the menu looks like:

Congratulations, you just built the first menu. It does not look very pretty at present since no real interesting stuff has been inserted. The border around the main menu was purposely not there since it could be added at any time. Check the demo page for some fancier examples.

4. Trouble Shooting

There are many reasons for not showing the menus.

1. It is possible that the web brower is not supported by JSCookMenu. 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 menu tree. Although JSCookMenu 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 cmDraw function is only called after both the menu tree and the HTML element that contains menu have appeared.
4. Make sure that JSCookMenu.js is the first thing to load in your HTML <head> section.
5. Make sure that JSCookMenu.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.