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

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

Font styling and padding are applied to items dynamically, after they have been created, in the itemSetup() function, along with color and border styling:

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...
    }
    else {
        with (this.style) {
            padding = itemPad;
            if (this.container.isTree && !this.hasMore) {
                if (isRight) paddingLeft = itemPad+fullImgSize;
                else paddingRight = itemPad+fullImgSize;
            }
            color = this.container.menuFontColor;
            fontSize = fntSiz + "pt";
            fontWeight = (fntBold) ? "bold" : "normal";
            fontStyle = (fntItal) ? "italic" : "normal";
            fontFamily = fntFam;
        
            borderBottomWidth = separator + "px";
            borderBottomColor = this.container.menuSeparatorCol;
            borderBottomStyle = "solid";
            backgroundColor = this.container.menuBGColor;
        }
    }
}

Currently, our SPAN creation code, in makeMenuIE(), gives items an id, a width and text content:

function makeMenuIE(isChild,menuCount,parMenu) {
    ...
    while (menu.itemCount id = itemName;
                style.width = (menu.menuWidth-(borWid*2));
                innerHTML = dispText;
            }
            ...
        }
        else {
            ...
        }
        ...    
    }
    ...
}

We don't know why, but some properties are changed properly, while others are not. We can solve our problem by moving the property assignments for the non-updated properties to the item creation code:

function makeMenuIE(isChild,menuCount,parMenu) {
    ...
    while (menu.itemCount 
                with(style) {
                    width = (menu.menuWidth-(borWid*2));
                    fontSize = fntSiz + "pt";
                    fontWeight = (fntBold) ? "bold" : "normal";
                    fontStyle =    (fntItal) ? "italic" : "normal";
                    fontFamily = fntFam;
                    padding = itemPad;
                }
                innerHTML = dispText;
            }
            ...
        }
        else {
            ...
        }
        ...    
    }
    ...
}

The original property assignments are now made available only to IE4, by hiding them from IE5:

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...
    }
    else {
        with (this.style) {
            if(!IE5) {
                fontSize = fntSiz + "pt";
                fontWeight = (fntBold) ? "bold" : "normal";
                fontStyle = (fntItal) ? "italic" : "normal";
                fontFamily = fntFam;
                padding = itemPad;
            }
            if (this.container.isTree && !this.hasMore) {
                if (isRight) paddingLeft = itemPad+fullImgSize;
                else paddingRight = itemPad+fullImgSize;
            }
            color = this.container.menuFontColor;
            borderBottomWidth = separator + "px";
            borderBottomColor = this.container.menuSeparatorCol;
            borderBottomStyle = "solid";
            backgroundColor = this.container.menuBGColor;
        }
    }
}

Hopefully, this time everything will be fine:

Menu Example 1:

Menu Example 2:

Menu Example 3:

Menu Example 4:

Menu 1
Menu 2
Menu 3
Menu 4

We snuck in an extra menu once again. The first three menus are fine, but the new fourth one, with a multi-line item, has poor text wrapping, for both IE5Mac and IE5Win There should be no text under the image. The word "in" should appear on a new line.

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