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

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
navigating the menu items

Webreference

Parameters used for the menus on this page:

menuWidth = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "black";
fntSiz = 10;
fntBold = true;
fntItal = true;
fntFam = "sans-serif";
backCol = "#DDDDDD";
overCol = "#CCCCCC";
overFnt = "black";
borWid = 2;
borCol = "black";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol = "black";
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 itemOver() and itemOut() functions have been discussed in detail in column 14, column 15, and column 18.

Mousing Over an Item

The itemOver() function is exactly the same as in Version 1, only we locate the source of the event for Explorer using menuLoc.

function itemOver(){
  if (IE4) {
    theEvent = menuLoc.event;
    if (theEvent.srcElement.tagName == "IMG") return;
    this.style.backgroundColor = overCol;
    this.style.color = overFnt;
  }
  else {
    this.bgColor = overCol;
  }
    
  if (this.container.hasChildVisible) {
    this.container.hideChildren(this);
  }            
  if(this.hasMore) {
    if (NS4) { 
      this.childX = this.container.left +
[cc]    (menuWidth - childOverlap);
      this.childY = this.pageY + childOffset;
    }
    else {
      this.childX = this.container.style.pixelLeft +
[cc] (menuWidth - childOverlap);
      this.childY = this.style.pixelTop +
[cc]    this.container.style.pixelTop + childOffset;
    }
    this.child.moveTo(this.childX,this.childY);
    this.child.keepInWindow();
    this.container.hasChildVisible = true;
    this.container.visibleChild = this.child;
    this.child.showIt(true);
  }
}

Mousing Out of an Item

Again, the only change to the function is the menuLoc identifier for the event.

function itemOut() {
  if (IE4) {
    theEvent = menuLoc.event;
    if (theEvent.srcElement.contains(theEvent.toElement)
     || (theEvent.fromElement.tagName=="IMG" &&
[cc] theEvent.toElement.contains(theEvent.fromElement)))
    return;
    this.style.backgroundColor = backCol;
    this.style.color = fntCol;
  }
  else {
    this.bgColor = backCol;
    if (!isOverMenu) {
      allTimer = setTimeout("currentMenu.hideTree()",10);
    }
  }
}

Notice that, even though the setTimeout() for menu hiding is used in menuOut(), it has been retained here for Navigator, as well!

If we do not specify a border for our menus, the event behavior will be the same as in Version 1, and we'll need to hide the menus by setting the timeout in the item's mouseout handler. If the menu's mouseout fires first, isOverMenu is set to false, so itemOut() knows that menu hiding is its responsibility.

More review, next page, with the in-window placement and link functions.