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 type="text/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 type="text/javascript" src="/JSCookMenu/JSCookMenu.js"></script>

Then

<link rel="stylesheet" href="/JSCookMenu/ThemeOffice/theme.css" type="text/css">
<script type="text/javascript" src="/JSCookMenu/ThemeOffice/theme.js"></script>

It is very important that JSCookMenu.js is loaded before themes and the menu you created.

It is also important to have include theme.js after theme.css since theme.js may do browser specific modifications.

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 type="text/javascript"><!--
	cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice);
--></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 (h), and the submenu is at the lower (b) right (r) position. cmThemeOffice is Office theme property. 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. Particularly Netscape 4.x and older are not supported.
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. It has been brought to my attention that many projects use modified version of the script. In those cases, some limitation that you may have experienced are due to these modifications, not my original code.