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

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
menu setup

Webreference

Parameters used for the menus on this page:

menuWidth = 120;
childOverlap = 20;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "white";
fntSiz = 10;
fntBold = true;
fntItal = false;
fntFam = "sans-serif";
backCol = "black";
overCol = "#AAAAAA";
overFnt = "white";
borWid = 0;
borCol = "black";
borSty = "solid";
itemPad = 3;
imgSrc = "triW.gif";
imgSiz = 11;
separator = 0;
separatorCol = "red";
isFrames = false;

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

In longer 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.

The menuSetUp() function has undergone fewer changes for Version 2 than its item counterpart.

menuSetup() accepts three arguments, passed to it by makeMenu()

hasParent (identifies the current menu as a child menu), openCont (the menu that opened the current menu) and openItem (the item that opened the current menu).

function menuSetup(hasParent,openCont,openItem) {
    this.onmouseover = menuOver;
    this.onmouseout = menuOut;
    
    this.showIt = showIt;
    this.keepInWindow = keepInWindow;
    this.hideTree = hideTree
    this.hideParents = hideParents;
    this.hideChildren = hideChildren;
    this.hideTop = hideTop;
    
    this.hasChildVisible = false;
    this.isOn = false;
    
    this.hideTimer = null;
    if (hasParent) {
        this.hasParent = true;
        this.parentMenu = openCont;
        this.parentItem = openItem;
        this.parentItem.child = this;    
    }
    else {
        this.hasParent = false;
        this.hideSelf = hideSelf;
    }
    if (NS4) {
        this.bgColor = borCol;
	    this.clip.right = menuWidth;
        this.fullHeight = this.lastItem.top +
[cc]            this.lastItem.clip.bottom + borWid;
        this.clip.bottom = this.fullHeight;
    }
    else {
        with (this.style) {
            width = menuWidth;
            borderWidth = borWid;
            borderColor = borCol;
            borderStyle = borSty;
        }
        this.lastItem.style.border="";
        this.showIt(false);
        this.onselectstart = cancelSelect;
        this.moveTo = moveTo;
        this.moveTo(0,0);      
    }
}

When menuSetup() is called, it first sets the mouseover and mouseout handlers. Again, the four statements have been reduced to two:

    this.onmouseover = menuOver;
    this.onmouseout = menuOut;

Next, it creates the same properties and methods for the menu that Version 1 did. Refer to our previous columns for details.

    this.showIt = showIt;
    this.keepInWindow = keepInWindow;
    this.hideTree = hideTree
    this.hideParents = hideParents;
    this.hideChildren = hideChildren;
    this.hideTop = hideTop;
    
    this.hasChildVisible = false;
    this.isOn = false;
    
    this.hideTimer = null;
    if (hasParent) {
        this.hasParent = true;
        this.parentMenu = openCont;
        this.parentItem = openItem;
        this.parentItem.child = this;    
    }
    else {
        this.hasParent = false;
        this.hideSelf = hideSelf;
    }

Menu Styling in Navigator

In Version 1, the menu element acted as a container only, a way to bind the items together. In Version 2, it visibly contains the items, providing them with a border.

Therefore, in Navigator, we set the menu background color to the value of borCol. We then clip it on the right to the menuWidth, creating horizontal borders. Finally, we calculate the total height of all the items based on the last item's position and bottom clip. We add a border width to this and clip the menu element's bottom edge. This creates the illusion of vertical borders:

        this.bgColor = borCol;
        this.clip.right = menuWidth;
        this.fullHeight = this.lastItem.top +
[cc]            this.lastItem.clip.bottom + borWid; 
        this.clip.bottom = this.fullHeight;

Menu Styling in Explorer

With Explorer, we simply expand the width of the menu and create a border for it using CSS JavaScript properties. Notice that the borSty parameter is used to specify a border style.

        with (this.style) {
            width = menuWidth;
            borderWidth = borWid;
            borderColor = borCol;
            borderStyle = borSty;
        }

The final item in the menu should not have a bottom border as it does not need a separator. The border is therefore removed from the final menu item:

        this.lastItem.style.border="";

The last four statements have not changed between versions, and simply set the visibility and the onselectstart handler and position the menu in the top left corner to avoid unnecessary scrollbars appearing.

        this.showIt(false);
        this.onselectstart = cancelSelect;
        this.moveTo = moveTo;
        this.moveTo(0,0);

The menu height is not set at this point, the natural place for it, because of the property update delay, we discussed earlier. All menus will have their height set, when all menu creation has ended, in the makeTop() function.

Once all menu items and menus have been created and sized, the script awaits the user to mouseover the page links that cause the menus to appear.