DHTML Lab: Hierarchical Menus, I | WebReference

DHTML Lab: Hierarchical Menus, I


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

This column introduces a new version of the hierarchical menu script. All information is valid at the time of writing. New browser versions released after publication may not behave as outlined. The script is constantly under revision, with new features added, problems fixed and new browser versions addressed.
Read this column, and future columns, to learn how we built the menu script.
Use the most recent version of the script, always available in HierMenus Central.

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4. Next column, Explorer 4 and cross-browser versions will be developed.

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:

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

First on our agenda is a look at the concepts behind a hierarchical menu tree.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Feb. 19, 1998
Revised: Feb. 19, 1998

URL: http://www.webreference.com/dhtml/column14/