DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIII (v3.08) | 5

Hierarchical Menus Ver. 3 - Addendum VIII (v3.08)
adjustments for five minor issues

Determining the Highest z-index

When the menu script springs into action, the Web page has loaded and all positioned elements have a z-index. Our task is to identify the highest set z-index in the page, and give our menus the same z-index. This is accomplished by brute force:

function makeTop(){
    beingCreated = true;

    if(IE4) {
        topZ = 0;
        for (z=0;z<menuLoc.document.all.length;z++){
            oldEl = menuLoc.document.all(z);
            topZ = Math.max(oldEl.style.zIndex,topZ)
        }
    }
    .
    .
    .
}

Early in the makeTop() function, we include a couple of IE-only statements. We create a variable, topZ, that will store the highest z-index in the page. We then go through every page element, as reflected in the document.all collection, and compare its z-index to topZ. If it is higher, topZ assumes its value. When we have finished looping through the elements, topZ will be equal to the highest z-index value in the page.

Note:
There is always the possibility that you, as an author, have another script running, one that might assign an even higher z-index to an element, dynamically, later in the browser session. In this case, you may omit the statements above, and simply include the line:

topZ = myVeryHighZindex

anywhere in the script or the parameter variables.

Assigning the Highest z-index

We now know the highest page element z-index, before the menus are created. We can simply assign the topZ value to the z-index property of all menu elements, ensuring that they display over all page elements. Therefore, the menuSetup() function gets one more line:

function menuSetup(hasParent,openCont,openItem) {
   .
   .
   .
   if (NS4) {
      this.bgColor = this.menuBorCol;
      this.fullHeight = this.lastItem.top + this.lastItem.clip.bottom + borWid;
      this.clip.right = this.menuWidth;
      this.clip.bottom = this.fullHeight;
   }
   else {
      with (this.style) {
         width = this.menuWidth;
         borderWidth = borWid;
         borderColor = this.menuBorCol;
         borderStyle = borSty;

         zIndex = topZ;
      }

      .
      .
      .
   }
}

Now, pass your mouse over the link below left to display menu tree again.

Menu Example:

The form elements should now display 100, for both Explorer and Navigator, and the menus should appear over the green element.

Next, let's look at the menu width problems.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 24, 1999
Revised: Aug 24, 1999

URL: https://www.webreference.com/dhtml/column21/addendum8/col21addVIII3.html