DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); Wrap-up

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
wrap-up

Webreference

Parameters used for the menus on this page:

menuWidth = 100;
childOverlap = 40;
childOffset = 3;
perCentOver = null;
secondsVisible = .7;
fntCol = "black";
fntSiz = 8;
fntBold = true;
fntItal = false;
fntFam = "sans-serif";
backCol = "#DDDDDD";
overCol = "#FFCCCC";
overFnt = "purple";
borWid = 1;
borCol = "black";
borSty = "solid";
itemPad = 1;
imgSrc = "tri.gif";
imgSiz = 6;
separator = 1;
separatorCol = "black";
isFrames = false;

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

The [cc] symbol denotes code continuation. The code is part of the preceding line. It is placed on a new line for column formatting considerations only.

Miscellaneous Functions

We set the onselectstart event handler for menu elements, in the Explorer-specific part of menuSetup(). It calls cancelSelect(), which disallows distracting highlighting of content within menus (same as Version 1):

function cancelSelect() { return false }

In the startIt() function, we set the resize handler for Navigator to call reDo(), which simply reloads the page, assuring any DHTML is laid out correctly.

function reDo() { menuLoc.location.reload() }

Ensuring Frame Menus Upon Page Load

Version 2 will create menus in a frameset regardless of whether the author has access to pages loaded in the main frame, and with no additional code necessary.

For faster menu creation, you can insert this onLoad handler in the BODY tag of any main frame page, as with Version 1. This way, the menus will be created when the frame page loads:

<BODY onLoad="if(parent.frames.nav &&
[cc] parent.frames.nav.startIt)parent.frames.nav.startIt()">

Our Apologies

Hierarchical Menus Version 2 is a major update and reworking of Version 1.

It not only provides a few more features, but it completely changes the Navigator menu creation logic. This means that the parameters used for Version 1 will, for the most part, no longer function if Version 2 is used.

We apologize for this non-compatibility.

Future versions will be backward-compatible.

Recap

To create hierarchical menus in a full-window page:

Place the browser-detection script in the page's HEAD.
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.
Define your menu arrays in an external file called hierArrays.js
Include hierArrays.js and the main menu script, hierMenus.js, in the page by conditionally loading them for menu-enabled browser versions.
Define "hotspots" for mouseovers that display the menus using links in your page's regular HTML flow.

To create hierarchical menus in a frameset:

Create a frameset document. It is recommended that the navigation frame is called nav and the main frame is called main.
Place the browser-detection script in the navigation frame document.
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.
Define your menu arrays in an external file called hierArrays.js
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.
Optional:

Define the onLoad handler of the BODY tag for all pages loaded into the main frame.

Final Word

A big Thank You to all who provided questions, suggestions and solutions that led to Version 2.
keep those cards and letters coming...and sorry about the blink...I couldn't resist!

As usual, the full code is repeated on our code pages.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column20/hier2Final.html