DHTML Lab: Hierarchical Menus, III; Frames - Navigation

Hierarchical Menus in Frames
the navigation frame

The menu-related HTML and script in our navigation frame look much like their counterparts in our regular non-frame menu pages.

The Generic Script

First, we include a generic script for all JavaScript-enabled browsers. After our usual browser-detection, we declare isMenu to allow only version 4 browsers and not Explorer 4 for the Macintosh to access our menu script later:

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

The one new statement declares a dummy startIt() function for non-menu browsers. startIt() will be redefined later for use by menu browsers.

The Menu Parameters

Next, we include our menu style parameters as variables. These follow exactly the same naming scheme as those in our regular cross-browser technique. The values below are for the menus used in our live example to the left. Use your own values to suit your pages. One new parameter, isLeftNav, has been added.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
    menuWidth = 120;
    childOverlap = 50;
    childOffset = 5;
    perCentOver = null;
    secondsVisible = .5;
    fntCol = "black";
    fntSiz = "12px";
    fntWgh = "normal";
    fntSty = "normal";
    fntFam = "sans-serif";
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "black";
    linHgt = "normal";
    borWid = 2;
    borCol = "MediumSlateBlue"
    borSty = "outset";
    imgSrc = "triangle.gif";
    imgSiz = 10;
    overFnt = "purple"
    isLeftNav = true;
}
//-->
</SCRIPT>

isLeftNav stores the position of our navigation frame. It is set to true, if our navigation frame is on the left, and false if it is on the top. We will use it later when positioning our menus.

The External Scripts

Finally, the two external scripts associated with the menus are loaded for menu-enabled browsers. The first, heirArrays.js, contains the JavaScript arrays that define menu item content and associated link URLs. The second, hierFrames.js, contains the menu-generating script.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2'
[keep with above line]  SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2'
[keep with above line]  SRC='hierFrames.js'><\/SCRIPT>");
}
//-->
</SCRIPT>

Note: These external files are used only by the navigation frame. A point might therefore be made for including the code in-page. This however, would warrant the addition of many conditional statements to filter out Explorer 4 Macintosh. By keeping the script as external files, we need only one conditional before loading.

The HTML Links

<A HREF="/"
   onMouseOver="popUp('elMenu1',event)"
   onMouseOut="popDown('elMenu1')">Webreference</A>
<A HREF="/index2.html"
   onMouseOver="popUp('elMenu2',event)"
   onMouseOut="popDown('elMenu2')">Contents</A>

Simple enough. The only real change from the regular menu technique is the dummy startIt() function for non-menu browsers. Next, let's reproduce the arrays used in our present example, as a refresher on their structure.