Hierarchical Menus in Frames
menu mouse events

There are two functions associated with the menu mouseover and mouseout and two with the menu item mouseover and mouseout. These are: menuOver(), menuOut(), itemOver() and itemOut(). The statements they contain are based on the event firing hierarchy of the two browsers. The two different event models mean that one browser does not call the functions in the same order that the other one does. The Navigator-specific code and the Explorer-specific code have been discussed in the previous columns.

In the frames version, the only changes relate to Explorer. Since the Explorer-specific code uses the event object, we must change event to main.event to reflect that it is an event fired in the main frame. In each case, we assign main.event to the theEvent variable for easier referencing:

function menuOver() {
  this.isOn = true;
  isOverMenu = true;
  currentMenu = this;
  if (this.hideTimer) clearTimeout(this.hideTimer);
}

function menuOut() {
  if (IE4) theEvent = main.event;
  if (IE4 && theEvent.srcElement.contains(theEvent.toElement))
      return;

  this.isOn = false;
  isOverMenu = false;
  if (IE4) allTimer = setTimeout("currentMenu.hideTree()",10); 
}

function itemOver(){ 
  if (IE4) theEvent = main.event;
  if (IE4 && theEvent.srcElement.tagName == "IMG") return;

  if (NS4) {
    this.bgColor = overCol;
  }
  else {
    this.style.backgroundColor = overCol;
    this.style.color = overFnt;
  }
  
  if (this.container.hasChildVisible) {
    this.container.hideChildren(this);
  }            

  if(this.hasMore) {
    if (NS4) {
      this.childX = this.container.left
                  + (menuWidth - childOverlap);
      this.childY = this.pageY + childOffset;
    }
    else {
      this.childX = this.container.style.pixelLeft
                  + (menuWidth - childOverlap);
      this.childY = this.style.pixelTop
         + 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);
  }
}

function itemOut() {
  if (IE4) theEvent = main.event;
    if (IE4 && (theEvent.srcElement.contains(theEvent.toElement)
     || (theEvent.fromElement.tagName=="IMG"
     && theEvent.toElement.contains(theEvent.fromElement))))
        return;

  if (NS4) {
    this.bgColor = backCol;
    if (!isOverMenu) {
      allTimer = setTimeout("currentMenu.hideTree()",10);
    }
  }
  else {
    this.style.backgroundColor = backCol;
    this.style.color = fntCol;
  }
}

Linking and Dragging

The linkIt() function, that loads the URL referenced in the clicked menu item is changed to reference the main frame:

function linkIt() {
    main.location.href = this.linkText;
}

The Explorer-specific cancelSelect(), which prevents highlighting of menu item content, remains the same:

function cancelSelect(){return false}

The remaining functions in our script are related to menu hiding and are unchanged from the regular version.