DHTML Lab: Cross-Browser Hierarchical Menus

Cross-Browser Hierarchical Menus
popup site navigation for both DHTML browsers

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.

The practical hierarchical menus that we developed last column for Navigator 4 have already appeared on many web sites. (one week interval)

This column, we will create a cross-browser script based on the concepts, methods and functions developed for Navigator 4. An understanding of these is necessary for following the present column, which will discuss menus that:

• 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

In This Column

We will discuss:

• cross-browser considerations
• the JavaScript array in more detail
• browser CSS rendering differences
• creating Explorer positioned elements on-the-fly
• creating cross-browser custom object methods
• using a positioned element's onClick handler
• making the menus appear anywhere on the page
• the Explorer event model
• new Explorer properties associated only with mouseover/mouseout events
• hiding parts or all of the menu tree
• Explorer-specific functions/methods
• backward compatibility

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

• the Explorer fromElement and toElement properties
• the Explorer contains() method
• the Explorer event model hierarchy