DHTML Lab: Hierarchical Menus, I; The Script

DHTML Hierarchical Menus, Part I
the main script

Webreference

Pass your mouse over the link above for an illustration of the item style discussed on this page.

In our main script, which, more often than not, will be an external one, we first use the parameter variables defined in-page to create a CSS stylesheet dynamically:

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 dynamically what would look like this, if created in the usual hard-coded fashion, using the parameters set on the previous page:

<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>

In otherwords, we create a CSS class called items with which we will style every menu item.

Next, we check for a value for perCentOver. If one exists, the childOverlap variable is changed to store the pixel value of the percentage.

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

A new variable, mSecsVis, is created to store the millisecond value of secondsVisible, to be compatible with JavaScript timer requirements.

mSecsVis = secondsVisible * 1000;

The two image variables, imgSrc and imgSiz are now used to create an HTML string defining the triangle image. This string is stored in imgStr:

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

The three lines above should be kept on one line in your code. Notice that a VSPACE of 2 was added. Experiment with different values to get the right spacing for your menus. You could possibly add another in-page parameter variable to define it. The ALIGN attribute gets a value of RIGHT, placing the image on the page first, with following HTML wrapped on the left. This gives us the effect we need. That is, left-aligned text and right-aligned image on the same line.

Finally, five global variables, vital to our routines are declared:

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

The first variable, topCount, tracks how many top level menus are created. In effect, it also tracks the total number of menu trees. Since we will have at least one menu, the initial value is 1.

Next, we declare areCreated, which tracks whether the menus have been created after page load. We will need areCreated to avoid mouseover errors during menu creation.

Another tracking variable, isOverMenu, tracks whether users have their mouse over a menu. We need this information to keep the menus alive.

The menu actually being used by the user is stored in currentMenu.

Finally allTimer provides us with a generic timer variable, to be used for in-tree navigation.

With all our variables declared, we direct the browser to begin execution of our routines upon page load:

window.onload = makeTop;