DHTML Lab: Cross-Browser Hierarchical Menus; Item Setup

Cross-Browser Hierarchical Menus
item setup

Webreference

Contents

Open the menus above to remind yourself that this is a technique worth learning.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

Since the item setup() method builds the item and styles it, it contains more browser-specific code than other methods/functions. The event handlers are assigned the same functions and the custom properties which store values taken from the array elements are the same:

function itemSetup(arrayPointer,whichArray) {
   this.itemOver = itemOver;
   this.itemOut = itemOut;
   this.onmouseover = this.itemOver;
   this.onmouseout = this.itemOut;
   this.dispText = whichArray[arrayPointer];
   this.linkText = whichArray[arrayPointer + 1];
   this.hasMore = whichArray[arrayPointer + 2];
   if (this.linkText.length > 0) {
      this.linkIt = linkIt;
      if (NS4) {
         this.onfocus = this.linkIt;
      }
      else {
         this.onclick = this.linkIt;
         this.style.cursor = "hand";
      }
   }
 
   if (this.hasMore) {
      htmStr = imgStr + this.dispText;
   }
   else {
      htmStr = this.dispText;
   }
   if (NS4) {
      layStr = "<SPAN CLASS=items>" + htmStr+ "</SPAN>";
      this.document.write(layStr);
      this.document.close();
      this.bgColor = backCol;
      this.clip.right = menuWidth;
      this.visibility = "inherit";
      this.container = this.parentLayer;
      if (arrayPointer == 0) {
         this.top = 0;
      }
      else {
         this.top = (keep with next line)
this.prevItem.top + this.prevItem.document.height - borWid;
      }
      this.left = 0;
   }
   else {
      this.innerHTML = htmStr;
      this.className = "items";
      this.style.padding = 3;
      this.style.backgroundColor = backCol; 
      this.container = this.offsetParent;
      if (arrayPointer == 0) {
         this.style.pixelTop = 0;
      }
      else {
         this.style.pixelTop = (keep with next line)
 this.prevItem.style.pixelTop + this.prevItem.offsetHeight - borWid;
      }
      this.style.pixelLeft = 0;
   }
}

Explorer can assign the onclick event handler to any element, so if our item is a link, its onclick handler calls its linkIt() method. As a courtesy, if the item is a link, we change the cursor shape to the hand cursor, alerting the user to its "clickability." Cursor chapes were discussed in our Explorer drag-and-drop column.

In Explorer, we can also change any style properties dynamically, so the inclusion of the SPAN element is unecessary. All styling can be applied directly to the item element. With this in mind, we first write the text-to-be-displayed to the item by changing the item's innerHTML property. Then we apply all the styling contained in the .items class to the item by assigning the items value to its className property.

Next, we add those three pixels of padding that we talked so much about earlier, and assign the default background color using our backCol parameter variable.

The container property stores the containing menu element. Finally, we position the item below the previous item created in this menu, using the same logic as before, only with Explorer-specific properties.

Let's review the functions that create the child menus.