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

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

Child Menu Positioning

You know the routine. Pass your mouse over the link below. Make sure you navigate the top menu to display the child menu.

Menu Example:     

In the parameter variables for this page, we have given the childOffset variable a value of 10. That is, the child menu should appear 10 pixels below the top of its parent item. The green element above is 10 pixels high. The child menu should appear immediately below it. Unfortunately, it doesn't, in either brower, as illustrated by the screenshots below:

Navigator: The child menu appears several pixels lower than the correct position.

Explorer: The child menu appears higher than the correct position.

Explorer Child Menu Positioning

The statements that determines the child menu vertical position on the page are found in the itemOver() function. For Explorer, we have this line:

this.childY = this.offsetTop + this.container.style.pixelTop + childOffset;

That is, a child menu's vertical position is the sum of three values:

1. this.container.style.pixelTop: The parent menu's vertical position in the page.
2. this.offsetTop: the parent item's vertical position within the parent menu.
3. childOffset: the vertical distance we have specified, determined from the top of the parent item.

There is one value we forgot to include: the top border of the parent menu. A contained element's offsetTop and offsetLeft property values are calculated from the usable area of its parent element, not from its parent's actual top and left positions. That is, offsetTop and offsetLeft are calculated after the parent's border.

Therefore, we must account for any menu border in our own calculations, so our line should read:

this.childY = this.offsetTop + this.container.style.pixelTop
            + childOffset + borWid;

Navigator Child Menu Positioning

The Navigator-specific line for child menu vertical positioning in itemOver() is:

this.childY = this.pageY + childOffset

To determine a child menu's vertical position, we add two values:

1. this.pageY: The parent item's vertical position in the page.
2. childOffset: the vertical distance we have specified, determined from the top of the parent item.

This seems to be all we need. We don't have real borders in the NS version. Why is the child menu positioned lower?

In Version 2 of the menu script, we began using creative clipping to simulate item padding. That is, the top of the item, and consequently, its pageY value, is lower on the page by the item padding (itemPad) value. We then apply a negative clip.top value, adding the padding:

We must therefore add the negative clip value to our calculation, to raise the child menu to its correct position:

this.childY = (this.pageY + this.clip.top) + childOffset;

Try the menu tree again, with the new calculations:

Menu Example:     

The remainder of our improvements deal with formatting within the item element itself.

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/col21addVIII5.html