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

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
additional features, improved compatibility and stability

WebReference

Contents

Pass your mouse over links above to reveal 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.

They're Back!!

The hierarchical menus just won't go away. They are now in use on Web pages originating in five continents. (We have yet to hear from authors in Africa and Antarctica). And if we had a nickel for every piece of mail they have generated, well, it would be "good bye day-job."

Readers queries, suggestions and improvements have been studied and incorporated into a new version of the Hierarchical Menus script. Version 2 offers additional functionality, bug fixes and more efficient code. At the same time, it includes both single window and frame functionality. It is highly recommended that it replace Version 1 on your Web pages.

Prerequisites

1. Familiarity with the 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.

The present column will deal only with the changes and improvements made to these scripts, when incorporating them into Version 2. The unchanged parts of the script will, however, be repeated for reference purposes.

In This Column

We will discuss:

• the new features of Version 2
• the new parameter variables
• using one script for both full-window and frames
• assuring menu regeneration on a NS4 window resize
• the difference between the IE4 scrollHeight and offsetHeight properties
• unlimited menu level creation
• styling without CSS for NS4
• dynamic CSS styling for Explorer
• using a navigation frame on any of the browser's four sides
• creating menus in any main frame page, without page modification
• ...and much more, including a review of all code

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

• nested JavaScript special conditional operators (?:)
• the IE4 scrollHeight property
• recursive functions
• the JavaScript 1.0 bold(), italics() and fontcolor() methods
• the NS4 POINT-SIZE= attribute
• the IE4 borderBottomWidth, borderBottomColor and borderBottomStyle properties
• the NS4 mouseup event

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