DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2) | 4 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2) | 4

Logo

Hierarchical Menus Ver. 3 - Addendum X-2 (v3.10.2)
further fix for IE5 image positioning plus one


The IE Accordion Syndrome

In Navigator, item elements are layers that are "clipped" to their correct width. If, per chance, we were to specify item content without spaces that flowed beyond the item width, the content would be "clipped" and the menu would retain the width we specified.

For example, consider a top-level menu built with the following array:

arMenu1 = new Array(
...
"ExpertsAndMoreExpertsAndEvenMoreExperts",
"http://www.webreference.com/experts/",
...
)

Navigator would give us the following:

without "more" imagewith "more" image

This is the behavior we expect. The menu width is important, and should be respected, even if we end up with an image overlapping the text.

Explorer, on the other hand, would expand the menu to contain the content:

without "more" imagewith "more" image

This is not desirable, at all.

The above example is extremely rare. Menu text is specified with the menu width in mind. For this reason, we did not foresee the IE expansion in our script.

We can constrain IE to the specified menu width with a one-line addition to the menuSetup() function:

function menuSetup(hasParent,openCont,openItem) {
  ...
  if (NS4) {
    ...
  }
  else {
    with (this.style) {
      width = this.menuWidth;
      borderWidth = borWid;
      borderColor = this.menuBorCol;
      borderStyle = borSty;
      zIndex = topZ;

//3.10.2 added next statement
      overflow = "hidden";
    }
    this.lastItem.style.border="";
    this.fullHeight = this.offsetHeight;
    if(isMac)this.style.pixelHeight = this.fullHeight;
    this.fullHeight = this.scrollHeight;
    this.showIt(false);
    this.onselectstart = cancelSelect;
    this.moveTo = moveTo;
    this.moveTo(0,0);
  }
}

By setting the overflow property of the menu element's style to "hidden", the menu is forced to remain at the specified width and all overflow content is hidden. This is similar to clipping, and more elegant. Clipping in IE should be used only if the left and top clip values are not 0. We won't discuss this in detail here, but that is the rule to follow.

Now, IE will always retain the specified width:

without "more" imagewith "more" image

Version 3.10.2 of hierMenus.js is reproduced in full on the following page.

Please, oh please, let this be the final maintenance release.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: July 20, 2000
Revised: July 20, 2000

URL: http://www.webreference.com/dhtml/column21/addendum10-2/4.html