Web www.gerd-tentler.de
Version 1.8 (released May 1, 2007) [Download]

Usage

First, insert this line into your HTML body (not in the head section):
<script type="text/javascript" src="menu.js"></script>
You should also put the following line on top of your HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
This is necessary to fix the CSS box model bug of Internet Explorer.

Then create a new instance of the MENU class. Choose "top" for a horizontal, or "left" for a vertical menu:
var menu = new MENU("left");
Now insert your menu items (level, height, text, [URL], [target], [JavaScript]):
menu.entry(1, 20, "item 1",   "page1.htm");
menu.entry(2, 15, "item 1.1", "page1-1.htm", "parent.main");
menu.entry(2, 15, "item 1.2", "page1-2.htm", "popup");
...
level  is the horizontal position of the item within the menu 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
height  is the item height in pixels.
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 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, set the top and left position, adapt the configuration to your needs, and create the menu:
menu.mainTop = 70;
menu.mainLeft = 10;
menu.mainBGColor = "back.jpg";
...
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:
<a href="javascript:menu.jumpTo(1, 3, 2, 1)">Go to menu item 1.3.2.1</a>
Hint: You should have a look at the source code of the introduction section to see how menus are created. ;-)

Comments