DHTML Lab: Hierarchical Menus Version 3 | 15

Hierarchical Menus: Version 3
in-page HTML and script

Webreference

Mouse over the link above to reveal menu. Mouse out to hide menu.

Parameters used for the menus on this page:

menuVersion = 3;
menuWidth = 150;
childOverlap = 1;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "black";
fntSiz = "10";
fntBold = false;
fntItal = false;
fntFam = "sans-serif";
backCol = "white";
overCol = "#FFCC00";
overFnt = "black";
borWid = 2;
borCol = "black";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 0;
separatorCol = "";
isFrames = false;
keepHilite = false; 
NSfontOver = false;
clickStart = false;
clickKill = false;
showVisited = "";

Background Reading:

Overhead script:
column 14
column 18

Parameter Variables:
  column 14
  column 15
  column 18
  column 20

External scripts:
column 15

Menu display links:
column 14

In script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

The [cc] symbol denotes code continuation. The code is part of the preceding line. It is placed on a new line for column formatting considerations only.

In-Page Script Overhead

The HEAD of our page, or the HEAD of our navigation frame, if we are using a frameset, includes our usual browser-detection variables and the dummy functions for non-DHTML browsers. These remain unchanged from version 2.

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

Recall that we exclude IE4 for the Macintosh, still poor in its DHTML support. Therefore the isMenu variable identifies version 4 browsers, except for IE4Mac.

The Parameter Variables

This version introduces six new parameter variables, five for new features, and one to ensure backward compatibility of version 3 with already existing parameters for previous versions. These will be discussed in detail on the next page.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
    menuVersion = 3;        // NEW! denotes version of script used
    menuWidth = 120;
    childOverlap = 50;
    childOffset = 5;
    perCentOver = null;
    secondsVisible = .5;
    
    fntCol = "blue";
    fntSiz = "10";
    fntBold = false;
    fntItal = false;
    fntFam = "sans-serif";
    
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "purple";     // now cross-browser
    
    borWid = 2;
    borCol = "black";
    borSty = "solid";
    itemPad = 3;
    
    imgSrc = "tri.gif";
    imgSiz = 10;
    
    separator = 1;
    separatorCol = "red";
    
    isFrames = false;
    navFrLoc =  "left";     // OLD! but with new functionality
    mainFrName = "main";
    clickStart = true;      // NEW! show menus with click
    clickKill = true;       // NEW! hide menus with click
    keepHilite = true;      // NEW! maintain item highlight
    NSfontOver = true;      // NEW! change NS font color onmouseover
    showVisited = "green";  // NEW! shade visited items for NS
}
//-->
</SCRIPT>

The External Script

The inclusion of the two external JavaScript files, hierArrays.js, containing the menu arrays, and hierMenus.js, our main script, has not changed:

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

Linking to the Menus

The in-page links that display the menus have not changed, either. Note that they remain exactly the same as in previous versions, with mouseover and mouseout handlers, even though version 3 allows the menus to be displayed with the click event. The main external script will handle this option.

<BODY>
.
.
.
<A HREF="default URL"
  onMouseOver = "popUp('elMenu1',event)"
  onMouseOut = "popDown('elMenu1')">
     Display HTML for Link</A>
<A HREF="default URL"
  onMouseOver="popUp('elMenu2',event)"
  onMouseOut="popDown('elMenu2')">
     Display HTML for Link</A>
.
.
.
</BODY>

Start Tree with a Child Menu

There may be a time when you wish to start a menu tree display deeper in the menu hierarchy. This is useful for pages deeper in a "site hierarchy," where less links are offered.

In version 3, we can simply place any menu string in the mouse event handlers. If, for example, we want the first link above to display the tree starting with menu elMenu1_3, we change the HTML to:

<A HREF="default URL"
  onMouseOver = "popUp('elMenu1_3',event)"
  onMouseOut = "popDown('elMenu1_3')">
     Display HTML for Link</A>

All child menus of elMenu1_3 will display as normal. Parent menus cannot be viewed. Make sure you place the menu name in both mouse handlers.

Now, let's take a closer look at the new parameter variables.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column21/hier3Params.html