Step 4 - The Menus

The actual menus are very easy to create. As with the nav bar all we have to do is create a table layout.

Let's take a look at one of the menus used here.

An overview

<a name="1"></a>  this is our named anchor - not essential but useful for non javascript browsers

<div id="menu" style="filter:revealTrans(duration=.5, transition=3);"> The menu table gets enclosed in a div tag with the name of your choice. Just give the menus simple easy to remember names. The style="filter:revealTrans(duration=.5, transition=3) applies the transition to the div for use in MSIE.

<layer name="menu" onmouseout="killMenu('menu')" onmouseover="checkMenu();">  Required for Netscape4x I fought hard against the inclusion of layers but there was just no way round it.

href="/dropmenu/index.shtml" onclick="goSub('/dropmenu/index.shtml','menu','');return false;" this is how we build the link the link is included in the href to make the link non javascript friendly. The next bit I'll explain a bit further.

goSub('/dropmenu/index.shtml','menu','') this is the javascript function call which takes 3 parameters. goSub('URL','MENU_NAME','TARGET').

URL - this is the url the link will go to.
MENU_NAME - this is the name of the current menu - this allows us to gracefully close the menu before going to the link.
TARGET this is where we want the page to display it can take the following values

'' - empty - the selected link will appear in the current window.
'new' - this will open a new window - html equiv target="_blank"
'framename' - framename - is whatever the target frame is called when using frames e.g 'contentframe' - html equiv taget="contentframe"

When building your menus follow this pattern

It's not that complicated is it - hopefully very little to learn to make you menu look good.