The Menu Sections

We now already have a display area and a scroll control. As for our menu, we will use... layers!

The startLayer layer will contain the Summary button and the parentLayer layer will hold the first level of our menu (the one that displays when the Summary button is activated) :

49: <DIV id="startLayer" STYLE="position: absolute; left: 0px; top: 0px; width: 160px; z-index: 10; visibility: hidden;"></DIV>
50: <DIV id="parentLayer" STYLE="position: absolute; left: 0px; top: 0px; width: 160px; z-index: 11; visibility: hidden;"></DIV>

The sub-menus will also be implemented in the form of layers that will be displayed or hidden, depending on whether or not the mouse pointer is moved over the main menu items.

Instead of creating the sub-menus ourselves, we will call on a small script that will dynamically implement the required layers by outputting the required HTML code:

50: <script language=javascript>
51: for (i=1; i<8;i++) {
52: document.write('<DIV id="child'+i+'Layer" STYLE="position: absolute; left: 0px; top: 0px; width: 160px; z-index: 12; visibility: hidden;"></DIV>');
53: }
54: </script>

The for...the next loop will carry out the instruction on line 52 7 times. This one creates (at each cycle of the loop) a layer that corresponds to one of the sub-menus, and assigns it a name in the form of: childXLayer, where X is a digit between 1 and 7 which will serve as the sub-menu identifier.