DHTML Lab: Hierarchical Menus, I; Compatibility

DHTML Hierarchical Menus, Part I
some final thoughts

Webreference

Contents

Open the menus above to remind yourself that this is a technique worth learning.

Last But Not Least

If you want all those links in the menus to actually do something, you'll need our final function, which defines an item's linkIt() method:

function linkIt() {
    location.href = this.linkText;
}

Clicking on an item specified as a link will load the linked URL.

Cross-Browser and Backward Compatibility

The code discussed in this column is Navigator 4-specific. Next column, we will create an Explorer 4 and cross-browser version. For those of you who can't wait, and want to use the Navigator version immediately, we provide some pointers:

<SCRIPT LANGUAGE="JavaScript">
<!--
    NS4 = (document.layers) ? 1 : 0;
    IE4 = (document.all) ? 1 : 0;
   ver4 = (NS4 || IE4) ? 1 : 0;
   function popUp(){return};
   function popDown(){return};
   if (!ver4) event = null;
//-->
</SCRIPT>

We first set up our usual DHTML-browser detection variables.

Next, we define the functions associated with the onMouseOver and onMouseOut event handlers that make the menus visible. These dummy functions will simply return, doing nothing, when a non-Navigator 4, JavaScript browser is being used. In our main script later, these functions are re-defined for Navigator 4 only.

Recall that our onMouseOver has this statement associated with it:

onMouseOver="popUp('elMenu1',event)"

Explorer 4 recognizes the event keyword, but Navigator 2+ and Explorer 3, which can execute onMouseOvers, do not. We must, therefore, assign any value (null, for example), so that these non-DHTML browsers do not choke when encountering event in the handler.

Parameter Declaration
Our in-page parameter variables can be declared in a JavaScript1.2 script. This will make them visible only to DHTML browsers. Explorer 4 can then be excluded by enclosing the variables in an if statement.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
    if (NS4) {
        menuWidth = 120;
        childOverlap = 50;
        childOffset = 3;
        .
        .
        .
        borSty = "outset";
        imgSrc = "triangle.gif";
        imgSiz = 10;
    }
//-->
</SCRIPT>

Conditional External File Definition
Finally, the two external files necessary for the menus, the array file and the routine file, can be made to load only for Navigator 4:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (NS4) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierMenus.js'><\/SCRIPT>");
}
//-->
</SCRIPT>

The Full Code

All the code discussed in this column is repeated, in its entirety, on the next three pages.