DHTML Lab: Hierarchical Menus Version 3 | 14

Hierarchical Menus: Version 3
new parameter variables

Webreference

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

Parameters used for the menus on this page:

menuVersion = 3;
menuWidth = 130;
childOverlap = 20;
childOffset = 5;
perCentOver = null;
secondsVisible = .8;
fntCol = "black";
fntSiz = 9;
fntBold = 1;
fntItal = false;
fntFam = "serif";
backCol = "#EEEEEE";
overCol = "#CCCCCC";
overFnt = "green";
borWid = 2;
borCol = "green";
borSty = "solid";
itemPad = 5;
imgSrc = "tri.gif";
imgSiz = 8;
separator = 1;
separatorCol = "green";
isFrames = false;
keepHilite = true; 
NSfontOver = false;
clickStart = false;
clickKill = true;
showVisited = "green";

menuVersion

Replacing the external hierMenus.js file with the new version takes seconds. Going through all of your pages and adding the new parameters will take a little longer. Perhaps you do not want to change the old pages, or are happy with the old features. The menuVersion variable ensures backward compatibility with previous versions of the script.

If your parameters include menuVersion, then the script will use the other five new parameters. If it doesn't, it will use only the version 2 parameters. The enhanced stability and speed of version 3 will still be available.

Future versions of the script will also check for this parameter. Give it a value of 3.

menuVersion = 3;

clickStart

If you want your menus to appear with the click event, set clickStart to true. If you want to use the default mouseover event, set it to false;

clickStart = true;  // show menus upon user link click
clickStart = false;  // show menus upon user link mouseover

clickKill

In the same way, you can choose to hide a menu tree when the user clicks outside the menus:

clickKill = true;  // hide menus upon user page click
clickKill = false;  // hide menus upon user menu mouseout

keepHilite

Another Boolean variable, keepHilite allows you to maintain the item mouseover attributes across the full menu tree for easier hierarchy identification:

menu tree with keepHilite
set to true

menu tree with keepHilite
set to false

NSfontOver

Netscape Navigator does not support dynamic font color change. We can "fake" a color change, however, by replacing the complete contents of a positioned element, changing only the font color. Since this method can slow a system down, it is included as an option. Set to true, for NS4 mouseover font color change; false for no change. IE4 will change the font color to the value of overFnt, regardless of this parameter's value.

showVisited

Since, as we shall see further on, version 3 creates <A> tags for NS4 menu items (to force a "hand" cursor), we can introduce an option for displaying visited items (read "visited links") in a different color. This parameter applies to your NS users only.

NS4 display of menu with showVisited set to "yellow", and first item already visited.

Set to an empty string or null for no visited link coloring:

Set to a valid color to enable the feature:

navFrLoc

In version 3, navFrLoc can be set outside of a frameset to specify menus that should cascade from right-to-left in full-window pages. It accepts only one value: "right".

isFrames = false;
navFrLoc = "right";

right-to-left menu cascade

Note:
If you choose right-to-left menus, make sure you change the imgSrc variable to point to a "left-pointing" image, like our "triL.gif".

Of course, if isFrames is true, navFrLoc returns to its old function, and can be set to "left", "top", "right" or "bottom".

The version 3 menus have other features, which are not set by parameter variables. These are specific to menu trees and are set in our arrays.