DHTML Lab: Hierarchical Menus Version 3 | 6

Hierarchical Menus: Version 3
what's new in this version

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 = .8;
fntCol = "black";
fntSiz = 10;
fntBold = false;
fntItal = false;
fntFam = "sans-serif";
backCol = "#3399FF";
overCol = "#55BBFF";
overFnt = "white";
borWid = 2;
borCol = "#0000FF";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol = "#000088";
isFrames = false;
keepHilite = true; 
NSfontOver = true;
clickStart = true;
clickKill = true;
showVisited = "green";

When last we discussed the menu script, in the version 2.1 article, a list was published with nine improvements foreseen for version 3. We have managed to incorporate eight of these. (hey, eight out of nine ain't bad!) In addition many more unforeseen improvements have been made.

The complete feature list includes:

Explorer-Specific

1.

Menu build time cut in half (standard)

2.

Multi-line items wrap correctly (standard)

Navigator-Specific

3.

Hand icon on item mouseover, if item is link (standard)

4.

Item font color change on item mouseover (optional)

5.

Visited items shaded a different color (optional)

Cross-Browser

6.

Frame menus rebuilt automatically upon new page load (standard)

7.

Any child menu can be displayed first in a menu tree (standard)

8.

Item highlight maintained across menu tree (standard)

9.

Absolute positioning for top-level menus (optional)

10.

Different color scheme (font, background, mouseovers, border, separator) for each menu tree (optional)

11.

Different widths for each menu tree (optional)

12.

Initial menu display with click event (optional)

13.

Menu hide with click event (optional)

14.

Menu cascade from right-to-left in non-frame documents (optional)

15.

Properly formatted items and left-aligned images in right-to-left menu trees (standard)

16.

Foreign server pages excluded from frame menu re-creation (standard)

Bug Fixes

17.

timers now cancelled upon page exit

The Discussion

We'll discuss the menu script in order, function-by-function, not by feature. The new-feature code will become apparent as we proceed. Again, we stress the need for a familiarity with older versions of the script.

Even though the script has changed dramatically since its first incarnation, many of the functions and much of the logic remains unchanged. Studying the previous versions will not only help you to understand the current one, but it is a good exercise in DHTML development, with all the quirks and bugs inevitably encountered along the way.

In the left column, we'll list appropriate background-reading from DHTML Lab for techniques discussed on each page.

So, as usual, let's start with a look at our parameter variables.