DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); Menu Hide Functions

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
the hide functions

WebReference

Parameters used for the menus on this page:

menuWidth = 120;
childOffset = 5;
perCentOver = 30;
secondsVisible = 1;
fntCol = "black";
fntSiz = 10;
fntBold = true;
fntItal = false;
fntFam = "serif";
backCol = "#00CC00";
overCol = "#008800";
overFnt = "red";
borWid = 2;
borCol = "darkgreen";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol =
     "darkgreen";
isFrames = false;

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

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.

When a user mouses out of the in-page link that displays a menu, the popDown() function is called, which retains its Version 1 statements:

function popDown(menuName){
    if (!areCreated) return;
    whichEl = eval(menuName);
    whichEl.isOn = false;
    whichEl.hideTop();
}

The Hide Functions

Version 2 retains the same six functions, used for partial or full menu tree hiding, as Version 1. The following four have no modified or additional statements:

function hideAll() {
  for(i=1; i<topCount; i++) {
    temp = eval("elMenu" + i);
    temp.isOn = false;
    if (temp.hasChildVisible) temp.hideChildren();
    temp.showIt(false);
  }    
}
function hideTree() { 
    allTimer = null;
    if (isOverMenu) return;
    if (this.hasChildVisible) {
        this.hideChildren();
    }
    this.hideParents();
}
function hideTop() {
    whichEl = this;
    this.hideTimer =
[cc] setTimeout("whichEl.hideSelf()",mSecsVis);
}
function hideSelf() {
    this.hideTimer = null;
    if (!this.isOn && !isOverMenu) { 
        this.showIt(false);
    }
}

Parent Menu Hiding

Since Version 2 allows unlimited menu levels in a menu tree, modifications have been made to hideParents() and hideChildren(). Originally, these functions presupposed a menu tree with a miximum of three levels.

function hideParents() {
    tempMenu = this;
    while (tempMenu.hasParent) {
        tempMenu.showIt(false);
        tempMenu.parentMenu.isOn = false;        
        tempMenu = tempMenu.parentMenu;
    }
    tempMenu.hideTop();
}

We assign the function-calling menu element (this) to tempMenu. If tempMenu has a parent menu, we hide the parent menu, set the parent menu's isOn property, and redeclare tempMenu to be its own parent. These statements, within a while loop, will repeat until tempMenu has no parent, in which case tempMenu must be the top-level menu, so its hideTop() method is invoked.

Child Menu Hiding

In the same way, we include a while loop in hideChildren():

function hideChildren(item) {
    tempMenu = this.visibleChild;
    while (tempMenu.hasChildVisible) {
        tempMenu.visibleChild.showIt(false);
        tempMenu.hasChildVisible = false;
        tempMenu = tempMenu.visibleChild;
    }
    if (!this.isOn || !item.hasMore ||
[cc]  this.visibleChild != this.child) {
        this.visibleChild.showIt(false);
        this.hasChildVisible = false;
    }
}

Unlike parent-hiding, we do not always want the child menu to be hidden. This depends on the circumstances under which hideChildren() was called. We always, however, want a grand-child menu to be hidden and all menus under that in the tree to be hidden.

We, therefore assign the child menu to tempMenu, and move through all grand children, using a while loop. When there are no more children to be hidden, the function continues outside the loop, deciding whether to hide the child menu, as in Version 1.

Finally, let's look at a couple of miscellaneous functions, and wrap up!