Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
element creation

Webreference

Parameters used for the menus on this page:

menuWidth = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;

fntCol = "black";
fntSiz = 10;
fntBold = false;
fntItal = false;
fntFam = "sans-serif";

backCol = "#DDDDDD";
overCol = "#CCCCCC";
overFnt = "purple";

borWid = 0;
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 actual positioned element creation, for the menus and items, is performed by makeElement(), just as in Version 1.

If makeElement() receives one argument, it creates a menu; with two arguments, it creates an item.

If makeElement() creates a menu, then the element which contains the menu is either the window or the frame, that is, the value of menuLoc. If we creating an item, then the container is the menu, passed as a second argument.

Navigator requires the wrapping width of content (width) to be specified upon element creation. For a menu, this is the menuWidth value. For an item, it is the menuWidth minus any border widths or padding:

function makeElement(whichEl,whichContainer) {
  if (arguments.length==1) {
    whichContainer =
[cc]  (NS4) ? menuLoc : menuLoc.document.body;
    if (NS4) elWidth = menuWidth;
  }
  else {
    if (NS4) elWidth =
[cc]  menuWidth-(borWid*2)-(itemPad*2);
  }
    
  if (NS4) {
    eval(whichEl+"= new Layer(elWidth,whichContainer)");
  }
  else {
    elStr = "<DIV ID=" + whichEl +
[cc] " STYLE='position:absolute'></DIV>";
    whichContainer.insertAdjacentHTML("BeforeEnd",elStr);
    if (isFrames) eval(whichEl + "= menuLoc." + whichEl);
  }

  return eval(whichEl);
}

We create the elements in our usual way (new Layer() for Navigator; inserted DIVs for Explorer) and return the new element to be assigned to the menu variable or menu.item property in makeMenu().

Now, on to our setup functions...