DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); Screen Formatting and Linking

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
screen formatting and linking

WebReference

Parameters used for the menus on this page:

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";
borWid = 0;
borCol = "red";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 3;
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.

Menu Positioning

All positioned elements in Navigator have a built-in moveTo() method. To enable better cross-browser scripting, we create a moveTo() custom method for Explorer elements. The same method can now be used for both browsers.

function moveTo(xPos,yPos) {
    this.style.pixelLeft = xPos;
    this.style.pixelTop = yPos;
}

Menu Visibility

All menus have a showIt() method, assigned in menuSetup(), that controls the menu element visibility. It is a standard element method in our columns:

function showIt(on) {
  if (NS4) {this.visibility = (on) ? "show" : "hide"}
      else {this.style.visibility = (on) ? "visible" : "hidden"}
}

Keep in Window

Just before any menu is made visible, and after it is positioned, its keepInWindow() method is invoked, to possibly adjust its position so it isn't partially hidden by the browser window edge.

The keepInWindow() function was discussed in column 14 and column 15.

Our only modification is, once again, the use of the menuLoc variable to identify the client area as a full window or a frame.

function keepInWindow() {
  scrBars = 20;   <-- may need changing if
                      "right" or "bottom" nav frame
  if (NS4) {
    winRight = (menuLoc.pageXOffset + menuLoc.innerWidth) - scrBars;
    rightPos = this.left + menuWidth;
   
    if (rightPos > winRight) {
      if (this.hasParent) {
        parentLeft = this.parentMenu.left;
        newLeft = ((parentLeft-menuWidth) + childOverlap);
        this.left = newLeft;
      }
      else {
        dif = rightPos - winRight;
        this.left -= dif;
      }
    }
    winBot = (menuLoc.pageYOffset + menuLoc.innerHeight) - scrBars;
    botPos = this.top + this.fullHeight;
    if (botPos > winBot) {
      dif = botPos - winBot;
      this.top -= dif;
    }
  }
  else {
    winRight = (menuLoc.document.body.scrollLeft +
[cc]   menuLoc.document.body.clientWidth) - scrBars;
    rightPos = this.style.pixelLeft + menuWidth;
    
    if (rightPos > winRight) {
      if (this.hasParent) {
        parentLeft = this.parentMenu.style.pixelLeft;
        newLeft = ((parentLeft - menuWidth) + childOverlap);
        this.style.pixelLeft = newLeft;
      }
      else {
        dif = rightPos - winRight;
        this.style.pixelLeft -= dif;
      }
    }
    winBot = (menuLoc.document.body.scrollTop +
[cc]   menuLoc.document.body.clientHeight) - scrBars;
    botPos = this.style.pixelTop + this.fullHeight;
    if (botPos > winBot) {
      dif = botPos - winBot;
      this.style.pixelTop -= dif;
    }
  }
}

Note:
You may need to change the value of scrBars, in the first line above, to keep the menus closer to the navigation frame if you are using "right" or "bottom" navigation frames.

Navigating to a New Page

Clicking on a menu item that has been specified as a link, calls an item's linkIt() method, which loads the new page into the window/frame specified by menuLoc:

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

Are we zooming through these review pages, or what? Next, the functions that hide the menus.