WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

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

Every item is a <SPAN> element followed by a line break (<BR>). All item elements are built as HTML strings, concatenated to the menu's itemStr property and inserted into the menu element in one go:

function makeMenuIE(isChild,menuCount,parMenu) {
    ...
    while (menu.itemCount < menu.maxItems) {
        ...
        htmStr = (hasMore) ? imgStr + dispText : dispText;
        menu.itemStr += "<SPAN ID=" + itemName
                     + " STYLE=\"width:" + (menu.menuWidth-(borWid*2))
                     + "\">" + htmStr + "</SPAN><BR>";
        ...    
    }

    menu.innerHTML = menu.itemStr;
    ...
}

This HTML string building was introduced for IE4 and, since it is accepted by IE5Win, has remained in our script. IE5Win and IE5Mac, however, also support element creation using the much more elegant Document Object Model standard. See Doc JavaScript for the basics of creating a document in this way.

For IE5Mac, using the DOM is the preferred way to create dynamic content. Support for the older IE4 HTML string method exists, but creates problems in advanced scripting. Most of the problems revolve around internal property updating, as we have seen, making the string method unreliable.

Therefore, we create our items using the DOM, for both IE5Mac (necessary) and IE5Win (doesn't hurt and adds elegance):

function makeMenuIE(isChild,menuCount,parMenu) {
    ...
    while (menu.itemCount < menu.maxItems) {
        ...
        htmStr = (hasMore) ? imgStr + dispText : dispText;
        if(IE5) {
            newSpan = menuLoc.document.createElement("SPAN");
            with(newSpan) {
                id = itemName;
                style.width = (menu.menuWidth-(borWid*2));
                innerHTML = htmStr;
            }
            newBreak = menuLoc.document.createElement("BR");
            menu.appendChild(newSpan);
            menu.appendChild(newBreak);
        }
        else {
        menu.itemStr += "<SPAN ID=" + itemName
                     + " STYLE=\"width:" + (menu.menuWidth-(borWid*2))
                     + "\">" + htmStr + "</SPAN><BR>";
        }
        ...    
    }

    if(!IE5) menu.innerHTML = menu.itemStr;
    ...
}

With the DOM, the elements are added to the menu immediately. As with the older method, which we leave in for IE4, we give each SPAN a width and id. Notice that we create the element in menuLoc (menu location) which could be the page itself or a different frame, depending on your use.

Try the menus now:

Menu Example 1:

Menu Example 2:

Menu 1
Menu 2

Our first menu is displayed perfectly. The second one is now weird. Not to worry, though, because now that we know what IE5Mac prefers, this is easily fixed.

Produced by Peter Belesis and

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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