A tool to generate fricker-free outline style menus or folder trees easily. Full featured in all 5+ version browsers, and legible in most older browsers.

1. Register and download the files
2. Include 'menu.js' from the head of your page
3. Define parameters or accept the defaults
4. Construct the menu array
5. Call menuwrite() to insert the menu

1. Register and download the files

Before downloading the program you are requested to register yourself. There is no registration fee. If you register, you are allowed to use the program as a free software, and we will inform you about future upgrades.

You can download the files either in zip or in tgz format.

Strictly speaking you only need the 'menu.js' file from the archive. 'plus.png', 'minus.png' and 'blank.png' are good starting points to create your own indenting images, but the rest are just examples.

2. Include menu.js from the head of your page

Insert the following line into the head of your page:
  <script src="menu.js"></script>

3. Define parameters

You can accept the defaults or assign new values to these variables:

  menuname="menu"

  menuclass="menu"

  menuindent=4"
Extra indenting of child lines.

  menutarget="contents"
The name of the target frame, where the linked item is displayed.

  menuplusimg="plus.png"
  menuminusimg="minus.png"
  menublankimg="blank.png"
Outline symbols for the collapsed, expanded and primitive lines respectively.

  menuexpand="Expand"
  menucollapse="Collapse"
Messages to display in the status line when the cursor is over an outline symbol.

4. The menu array

Each string in the menu array defines one menu line. One line looks like: "1+Text|Link|Status"

The first character is the outline level. Level 0 is top level and is not collapsible. Levels 1-9 are collapsible.

The second character is the linking mode

' '	no link (rarely used)
'+'	frame menutarget (most common)
't'	frame _top
's'	frame_self
'p'	frame _parent

The substring from character 2 to the first | delimiter is the Text.
Text is the visible part of the menu. It can be a text or an <img ...> tag.

The substring from the first | to the second | delimiter is the Link.
If the user clicks on the menu item this page will be loaded into frame menutarget. Link can be omitted.

The substring from the second | to the end of the string is the Status
The Status is displayed in the status line when the mouse is over the Link. Status can be empty, and is meaningless if Link is empty.

5. Insert the menu

Insert the following lines into the body of your page where you want the menu to appear:

  <script>
    menuwrite();
  </script>

Example: (See it working above)

  <script>
    menu=[
      "0+Example",
      "1+Shapes|info.html|About shapes",
      "2+Circles||Please select color",
      "3+Red|redcircle.html|Click to see the red circle",
      "3+Green|greencircle.html|Click to see the green circle",
      "3+Blue|bluecircle.html|Click to see the blue circle",
      "2+Rectangles||Please select color",
      "3+Red|redrectangle.html|Click to see the red rectangle",
      "3+Green|greenrectangle.html|Click to see the green rectangle",
      "3+Blue|bluerectangle.html|Click to see the blue rectangle",
      "1+Colors||Select only the colors",
      "2+Red|red.html",
      "2+Green|green.html",
      "2+Blue|blue.html"];
    menuwrite();
  </script>

A real world example: http://www.propix.hu/contents.html

See also the Simple indented menu generator for 4+ browsers. It is simpler, and uses the same menu definition table.

Back to home  More JavaScript  Top of the page  Request more information