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

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
what's new in version 2

Webreference

Parameters used for the menus on this page:

menuWidth = 150;
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 = "";
isFrames = false;

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

Keep Those Letters Coming

The feedback on version 1 revolved around these issues:

General Script Functionality:

1. "How can I incorporate the two scripts (window and frame-based) into one, and simply choose the window or frame functionality through a variable?"

2. "The scripts offer three menu levels. I need more in my pages."

3. "I need the ability to incorporate infinite levels of menus in my pages." sheesh!

Frame Functionality:

1. "The script assumes a navigation frame on the left or the top. My site's navigation frame is on the bottom."

2. "I want menus to appear from a navigation frame on the right!"

3. "The script specifies that every page in the main frame needs a line of code for the menus to appear. I don't have access to all the pages that appear in my main frame, yet I want menus to appear. In fact, I want menus to appear on any page that is loaded into the main rame, whether they are served from my site or not!"

Navigator Problems:

1. "Some of my visitors are using NS4 and say the page with the menus never appears! The browser just hangs! NS3 and IE4 display it fine, and so does my version of NS4. I can't trace the problem."

2. "Sometimes, in NS4, the CSS styling is lost on my menus. The rollovers work fine, but the borders and font specs are missing. I reload and it works. I can't figure out this rendering inconsistency."

3. "I resize the page in NS4 and the menus never reappear."

4. "The page navigated to, after a menu selection, is in focus. Although the highlighting can be removed with a click, it is irritating for the novice."

Menu Appearance:

1. "I don't want borders around each item. Just around the complete menu."

2. "How can I get a separator line between each item that is different from the border?"

Version 2 addresses all the above.

Frame and single window functionality has been combined into one script. A Boolean parameter variable, isFrames, toggles the type of menus created. Instead of three separate functions for the three menu levels, version 2 uses a single recursive function that allows for any number of levels, depending only on the number of menu arrays defined.

A new parameter variable, navFrLoc, allows for navigation frames on any of the four sides. If the main frame page code is omitted, menus can still appear in frame-based layouts, by being created on demand, after the main frame loads.

The logic for the Navigator-specific code has been completely changed, moving from the layer-CSS combination of version 1, to a solely dynamic layer-based one. The result is a no-surprises stability. The onfocus() handler for detecting menu clicks has been replaced, and the DHTML Diner resize code has been drafted to handle the resize problem.

Finally, authors are given greater flexibility in defining the look of the menus. Borders are no longer applied to every item, but to each menu as a whole. Provision is made for separator lines between items.

Version 1 menu	The menus generated by version 1 had the same border width around all items. Version 2 allows for greater variety in menu "look" by mixing and matching menu and item borders. The four examples below are just a sample:
same widths for border and separator	thicker border
no item separator	no menu border

Our Discussion

We will move through the version 2 script line-by-line, emphasizing and detailing only what is new. It will be assumed that you are familiar with the version 1 script.

Let's start with a look at our parameter variables and our in-page script and HTML.