DHTML Lab: Hierarchical Menus Version 3

Hierarchical Menus: Version 3
additional features, improved IE speed

WebReference

New

Click the links above to reveal menus. Click anywhere on the page to hide menus.

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 and Microsoft Internet Explorer 4 for Windows.

At Last!!

...a much-delayed Version 3 of the Hierarchical Menus script sees the light of day. My apologies for the lack of content on DHTML Lab over the last couple of months. Hopefully, your patient waiting will be rewarded over the next weeks.

And for the reader who wrote:

"I, along with probably a lot of people who read WebReference, am anxiously waiting for the third version of HierMenus... or any new column to DHTML Lab for that matter. Have you fled to the Bahamas to avoid the IRS or something similar?"

...the answer is "no."

The script is long, as is this column. To follow our discussion, it is an absolute must that you be well-versed in previous versions of the menu script.

Prerequisites

1. Familiarity with the original Cross-Browser Hierarchical Menus script, developed in column 14 and column 15.

2. Familiarity with the Hierarchical Menus for Frames script, developed in column 18.

3. Familiarity with Hierarchical Menus Version 2, developed in column 20, and Hierarchical Menus Version 2.1, developed in column 20 - Addendum

The present column will deal only with the changes and improvements that are included in Version 3. The unchanged parts of the script will, however, be repeated for reference purposes.

In This Column

We will discuss:

• the new features of Version 3
• displaying a menu tree from any level
• the new parameter variables
• the new tree-specific parameters
• better item display in a right-to-left cascade
• creating the menus automatically on a frame load
• much faster menu-creation for Explorer
• script error handling
• ...and much more, including a review of all code

For the first time, in our columns, we will learn to use:

• the onload event across frames in Navigator
• the onreadystatechange event and readyState property for Explorer
• dynamic non-positioned elements in Explorer
• the old JavaScript 1.0 linkColor, alinkColor and vlinkColor properties
• JavaScript Stylesheets in the SCRIPT tag
• the window.onerror handler

First, let's look at what's new in version 3.