DHTML Lab: Hierarchical Menus, I

DHTML Hierarchical Menus, Part I
popup site navigation for Navigator 4

Pass your mouse over the Webreference site navigation bar above. Several of the links produce popup hierarchical menus. The same menus can be displayed by passing the mouse over the bold text links in the left column.

Impressed? The practicality and uses for the menus are obvious--and if you've seen the amount of little round column navigation buttons, you know there's a lot to read coming up--so we won't include any unnecessary hype for why you should learn to create them.

We've received many requests for this technique. Most of them were prefaced, "Have you seen the cool Navigator 4 menus at www.ibm.com?". Yes, we have. And, yes, they are cool. But, as you'll discover, ours, may be cooler. Our menus:

• work in both Navigator 4 and Explorer 4
• load conditionally in a single cross-browser backward-compatible page
• are three levels deep, with the possibility of more
• are completely author-modifiable through parameter variables
• can appear anywhere on the page or in several places
• are generated by an external file that can be used for many pages with different menus

The complete hierarchical menu technique will be covered in two columns. Part I, the present column, discusses the concepts behind the technique and the creation of hierarchical menus for Navigator 4. Next column, in Part II, we'll deal with an Explorer 4 version, and combine the two into a cross-browser version.

In This Column

We will discuss:

• the component parts of a menu tree
• storing multi-dimensional information in a one-dimensional JavaScript array
• controlling the menu look through CSS
• dynamically generating a CSS stylesheet using JavaScript parameter variables
• creating positioned elements on-the-fly
• assigning functions to custom object methods
• using a positioned element's onFocus handler
• making the menus appear anywhere on the page
• navigating a menu tree
• hiding parts or all of the menu tree
• backward compatibility

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

• how to create custom methods using functions and the this keyword
• the power of a positioned element's onFocus event handler
• to pass events as function arguments, using the event keyword
• to conform our script to Navigator's event model hierarchy