Cross-Browser Hierarchical Menus
the main script

Webreference

Contents

You know the routine.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

Our main external script, in its cross-browser version, begins in exactly the same way as the Navigator-specific one. First, a CSS stylesheet, defining a class named .items, is created dynamically, using our several of our parameter variables:

semi = ";";

styleStr = "<STYLE TYPE='text/css'>"
styleStr += ".items {"
styleStr += "width:" + menuWidth + semi
styleStr += "color:"+ fntCol + semi
styleStr += "font-size:"+ fntSiz + semi
styleStr += "font-weight:"+ fntWgh + semi
styleStr += "font-style:"+ fntSty + semi
styleStr += "font-family:"+ fntFam + semi
styleStr += "border-width:" + borWid + semi
styleStr += "border-color:" + borCol + semi
styleStr += "border-style:" + borSty + semi
styleStr += "line-height:" + linHgt + semi
styleStr += "}"
styleStr += "</STYLE>";
 
document.write(styleStr);

The above creates what, if hard-coded, would look like this:

<STYLE TYPE='text/css'>"
<!--
    .items {
        width: 120;
        color: black;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-family: sans-serif;
        border-width: 2px;
        border-color: #CC0000;
        border-style: outset;
        line-height: normal;
    }
-->
</STYLE>

Our global variables, our triangle image string and our onload event handler are defined.

if (perCentOver != null) {
    childOverlap = (perCentOver/100) * menuWidth
}

mSecsVis = secondsVisible * 1000;

imgStr = "<IMG SRC=" + imgSrc + " WIDTH=" + imgSiz
   + " HEIGHT=" + imgSiz
   + " BORDER=0 VSPACE=2 ALIGN=RIGHT>";

topCount = 1;
areCreated = false;
isOverMenu = false;
currentMenu = null;
allTimer = null;

window.onload = makeTop;

As before, when our page has loaded, control is passed to the makeTop() function.