Hierarchical Menus: Version 3
wrap-up

WebReference

Click the link above to reveal menu. Click anywhere on the page to hide menu.

Parameters used for the menus on this page:

menuVersion = 3;

menuWidth = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;

fntCol = "blue";
fntSiz = 10;
fntBold = false;
fntItal = false;
fntFam = "sans-serif";

backCol = "#DDDDDD";
overCol = "#FFCCCC";
overFnt = "purple";

borWid = 2;
borCol = "black";
borSty = "solid";
itemPad = 3;

imgSrc = "tri.gif";
imgSiz = 10;

separator = 1;
separatorCol = "red";

isFrames = false;

keepHilite = true; 
NSfontOver = true;
clickStart = true;
clickKill = true;

showVisited =
   "yellow";

Background Reading:

linkIt():
  column 14
  column 18
  column 20
  col20-addendum

cancelSelect():
  column 15

Final Functions

Two final functions, linkIt() and cancelSelect() remain the same. linkIt() loads the new page specified in the menu arrays, or it runs a function. cancelSelect() disallows text highlighting in menus for IE4.

function linkIt() {
    if (this.linkText.indexOf("javascript")!=-1)
        {eval(this.linkText);return}
    menuLoc.location.href = this.linkText;
}

function cancelSelect(){return false}

That's It

This completes our look at Hierarchical Menus, Version 3. The instructions for including the menus in your pages are repeated below.

To create hierarchical menus in a full-window page:

1. Place the browser-detection script in the page's HEAD.
2. Place the parameter variable script in the page's HEAD as well, with the parameters defined appropriately for your application. Make sure that isFrames is false.
3. Define your menu arrays in an external file called hierArrays.js. Don't forget that the array that defines the top-level menu has nine extra elements that specify the tree-specific parameters.
4. Include hierArrays.js and the main menu script, hierMenus.js, in the page by conditionally loading them for menu-enabled browser versions.
5. Define "hotspots" for mouseovers that display the menus using links in your page's regular HTML flow. In this version, any child menu can begin the display of the menu tree.

To create hierarchical menus in a frameset:

1. Create a frameset document. It is recommended that the navigation frame is called nav and the main frame is called main.
2. Place the browser-detection script in the navigation frame document.
3. Place the parameter variable script in the navigation frame document, with the parameters defined appropriately for your application. Make sure that:
   1. the isFrames parameter is true
   2. the navFrLoc parameter points correctly to the position of the navigation frame in the frameset. Possible values: "left", "top", "right" and "bottom."
   3. the mainFrName parameter is equal to the NAME= attribute for the main frame.
4. Define your menu arrays in an external file called hierArrays.js, remembering that top-level menu arrays have nine extra elements.
5. Include hierArrays.js and the main menu script, hierMenus.js, in the navigation page by conditionally loading them for menu-enabled browser versions. Define "hotspots" for mouseovers that display the menus using links in your navigation page's regular HTML flow.

Final Word

Version 3 has been written almost completely based on reader feedback. You know who you are, and a big thanks goes out to you.

The Future of the Script

Will there be a version 4? For sure. Suggestions for improvements and problems should be posted in the Hier Menus Want thread in the DHTML Forum. They will be taken into consideration.

The next three pages contain the usual full code repeated