DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum IX (v3.09) | 11 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum IX (v3.09) | 11

Logo

Hierarchical Menus Ver. 3 - Addendum IX (v3.09)
enabling menus for IE5 Macintosh


Recall that all items in a menu tree should be properly wrapped if any item in any menu in the tree has a child menu:

from Addendum 8

In the current script, this extra padding, enabling correct wrapping, is added in itemSetup():

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...
    }
    else {
        with (this.style) {
            ...
            if (this.container.isTree && !this.hasMore) {
                if (isRight) paddingLeft = itemPad+fullImgSize;
                else paddingRight = itemPad+fullImgSize;
            }
            ...
        }
    }
}

Notice that the extra padding is added to all items except items that have a child element. These items were excluded because they had images and the extra SPAN that corrected the wrapping by having a height of 100%, as mentioned previously.

With our new code that omits the span and places the image directly in the item as a positioned element, we need to add the extra padding to all items, if IE5 is used:

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...
    }
    else {
        with (this.style) {
            ...
            if (this.container.isTree && (IE5 || (!IE5 && !this.hasMore))) {
                if (isRight) paddingLeft = itemPad+fullImgSize;
                else paddingRight = itemPad+fullImgSize;
            }
            ...
        }
    }
}

We finally have perfect menus (I hope):

Menu Example 1:

Menu Example 2:

Menu Example 3:

Menu Example 4:

 
Menu 1
Menu 2
Menu 3
Menu 4

Now we can wrap up.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 16, 2000
Revised: June 16, 2000

URL: http://www.webreference.com/dhtml/column21/addendum9/9.html