Adding Actions:

Now that we have created the main menus and the sub menus, we need to activate them. We will start by making an Action Group that will hide all of the menus. Open the head section of the page by clicking the small triangle in the upper left of the layout window and drag a Head Action over from the Smart tab of the Objects palette. Change it from OnLoad (the default) to OnCall, and give it a name such as "clearmenu".

Now set the action to Specials > Action Group. In the Action Group add 3 actions (or 1 for each submenu). Set each of them to a Multimedia > ShowHide action. In each of those actions select one of the submenu FBs and set it to Hide. Now we have an action group that can be called a number of different times on the page to hide all the submenus.

Next hide all of the FBs, if they aren't already hidden from the previous page of this tutorial. Click on the first main menu button image and turn it into a link. In the Link tab of the inspector, set the link to "#" (without the quotes). Now go to the Action palette and select the Mouse Enter event. Add an action to it and set that action to be a Multimedia > Show Hide action. In the action, select the FB that contains the submenu for this menu button, and set it to Show. That's the only action we are adding to this button, so this one is done. Now repeat the above steps for the rest of the menu buttons, making each a link to "#" and adding a ShowHide action to the Mouse Enter event that will show the submenu for that menu button.

Now we need to add the actions to the submenus. In the Floating Box palette, select the first submenu FB and set it back to Visible. Click on the transparent gif on the left side and turn it into a link. Set it's URL to "#". Go to the Action palette and add an action to it's Mouse Enter event. Set this action to Specials > Call Action. In the action, select the name of the Head Action you created (clearmenu). Next click the gif on the right and do exactly the same thing. Finally, select the one under the submenu and do the same thing for that one.

Now hide the FB and unhide the next one. Do the same procedure for the transparent gifs in this one. Then hide it and do the same for the third one.

There is one more step to get the basic function of showing and hiding the menus to work properly. If you are not used to using the Source View, then it may seem complex, but it really isn't.

Drag a Javascript icon from the Head tab of the Objects palette into the head section of your page. Click the javascript icon, then click the Edit button in the inspector. A script editing window pops up. Copy and paste the following code into that window.

if(document.layers) {
document.write('<style media="screen" type="text/css"><!--\n');
    document.write(CSS HERE}\n");
    document.write(CSS HERE}\n");
    document.write(CSS HERE}\n");
    document.write("--></style>\n");
}

There are three lines in there that contain "CSS HERE" in them. These lines must be repeated once for every submenu that you have on the page. Close the javascript editor.

Now you need to switch over to source view. Scroll to the top of the page. You will see a section that starts with a <style> tag and ends with a </style> tag. Between these are the CSS definitions for the submenu FBs. You need to, one at a time, copy these lines and paste them in to replace the CSS HERE in the corresponding line of javascript below them. Do not delete the CSS lines that are there. You need to duplicate them inside the javascript lines.

For example, in the page we have been creating there is a CSS line that says:

#menu1 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 100%; height: 218px; visibility: hidden }

When this is used to replace the CSS HERE in the first javascript line, that line then looks like:

document.write("#menu1 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 100%; height: 218px; visibility: hidden }\n");

Remember, you do not get rid of the line you are copying. You are duplicating that text into the javascript line.

Now look in each of the lines you have created and find the part that says "100%". Change that to "250%". So the line now looks like:

document.write("#menu1 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 250%; height: 218px; visibility: hidden }\n");

Do that to each of the new lines. Do not change the original lines that you copied from.

OK. You can switch back to layout view and save your page. It is done as far as the basic function of showing and hiding the submenus. Next we need to make the menus actually do something.