The menu revealed

The contents of this particular menu is actually made up of 5 layers -- the headline plus each article link (4). The main reason each article link resides within its own layer is to allow for the highlighting effect, wherein the item being hovered over changes to a beige background. All of these layers are actually wrapped inside a large outer layer which represents the entire menu as one entity. The outer layer, which we'll see more closely later, is mainly used to test whether the mouse is on or off the menu with respect to the rules governing menu disappearance.

When these layers are created in the HTML, though, they are not positioned in vertical alignment because we cannot know the height of each layer at the time of creation (which may vary depending on font size, browser platform, and so forth). Since the layers are initially created as invisible this poses no aesthetic problem. Rather, once popups.html loads into the menu window, the setup() function will be called for each menu, vertically aligning its constituent layers. This function sets up the menu whose name is passed via the topic parameter; e.g. setup("annuities") will setup the annuities topic menu. To clarify, each menu is setup only once, quite like setting up a chessboard in preparation for a game.

First, setup() has to determine how many layers the menu contains. As stated, the menu pictured above contains 5 layers. This brings us to why we needed separate code for each browser -- Netscape knows how many "child layers" a layer contains. In other words, it knows that the outer layer for the pictured menu (named "state", based on the topic name) contains 5 child layers. Internet Explorer does not have such insight -- rather, it knows how many children a layer may contain but these children are not limited to other layers. Thus, the separate code for Explorer first counts the number of children which are actually layers and then moves forward from there in a similar fashion as the Netscape code.

In brief, the heart of the setup() code is the for loop (the one in the Netscape section and the second for loop in the Microsoft section). This loop simply places the top of each layer subsequent to the first at the position of the previous layer's bottom. The result is that all the layers line up vertically. By increasing the gap value we could add space between each layer rather than align them flush, were that desired.

Once this setup() function has been called for each topic menu all of the menus are properly aligned. But the menus themselves are still invisible -- they're simply ready to be called "up" at any time now.

Initiating setup for each menu.

function initSetup() { setupComplete=false; setup("annuities"); setup("auto"); setup("business"); setup("health"); setup("home"); setup("life"); setup("personal"); setup("state"); setup("ratings"); setup("features"); setup("toolbox"); setup("help"); setup("sponsor"); setupComplete=true; }

As implied, the setup() function is executed for a particular menu whose name reflects its topic. The initSetup() function explicitly calls setup() for each of this client's topics. It may seem odd to write out each function call as has been done here but this was found to be necessary to properly signal the main browser window when setup has been complete. Because we don't want to pop-up a menu before setup is complete the boolean variable setupComplete is created. The "mission control" script, which resides in the main browser window (embedded into the client's original page) can check this setupComplete variable to verify whether the menus are ready to pop-up.

Setting up the menu's layers
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Coloring the stylesheets