Using a Javascript-driven menu in Front Page

First of all, note that the banner graphic used here has nothing to do with this page. The links in the menu are similarly irrelevant. The purpose of this page was to test the use of this Javascript menu.

The script used here came from dynamicdrive.com. See the HTML for more information.

My goal was to get a menu system that would appear to be fully integrated with the page header. It took quite a bit of fooling around to make this happen. I don't know a damn thing about Javascript, but thanks to the author's included notes, I was able to modify the following parameters:

  • Changed background color of menu to white. If you don't do this, it will stretch to the full width of the window. Oddly, even when margins are set to 0, and the table containing the banner graphic was set to 100%, the table still didn't fill the screen in Netscape. Thus, it was out of alignment with the menu. The solution was to remove any color from the menu, hiding the fact that it doesn't align.

  • Changed border color to white, for the same reason as above. This menu looks very neat and organized with the border, but the border fills the whole screen and doesn't look right when the top table doesn't quite fill the screen.

  • Moved the menu down below the graphic. The default setting is for the menu to appear at the very top of the page, but if you do it that way, the menu appears disconnected from the banner package.

  • Added horizontal black rules. These tie the whole thing together, I think. The borders were accomplished by inserting clear GIF images in table cells, then setting the cell background color to black.

  • Changed background colors in the drop down items to match the dark green shade used in the banner GIF.

  • Set the background color in the cell containing the GIF to the same green shade as the GIF.

Take a look at www.lehrercommunications.com/menu/index.htm to see how I can save many steps by including the banner, with the Javascript menu, in all pages throughout a site.

Jonathan Lehrer
jonathan@lehrercommunications.com