Fixed Position Menus:

Before trying to implement the menus on your page, first design and build your basic page layout and place the main menu buttons on it. These buttons should be simple graphics, not GoLive's "Rollover Buttons". A rollover effect will be explained, if you wish to have that, but you should be placing these images as simple images, not using the Rollover Buttons.

Start by placing a table where you want the menu to show up. This table may be nested within another table that arranges the basic sections of the page. It can also be a row of cells, or a column of cells that are part of a larger table, but it is often better to place the main menu buttons inside their own table that is then nested within a main table for the page. This table should be placed within the normal content of your page, not inside a Floating Box.

If your menu is a horizontal row of buttons near the top of the page, make the table a 1 row by n column table, where "n" is the number of buttons in the menu. If the menu is a vertical row of buttons near the left side, then make the table 1 column by n rows. Place all of your main menu buttons in the table, one in each cell. Leave the table (and all the cells) set to auto width and height. Set the border, cell padding, and cell spacing all to zero. If this table is going into a cell of a larger table, be sure to set the alignment for that cell to Top (vertical alignment) and Left (horizontal alignment). This now gives us the basic look of the menu for the page.

Submenus:

Place an FB on your page and inside of it place a table. Don't worry yet about exact placement of the submenu. Just create it first.

Top Menus:

If your menu is a horizontal row of buttons near the top, then the table should contain 1 column and n rows, where "n" is the number of links in the submenu plus 1. So if there are 5 links in the submenu, the table should have 6 rows.

The top cell will either contain a transparent GIF image, if you don't want a rollover effect for the main menu button, or it will contain the rollover image for that button. Either way, this image should be the exact same size as the main menu button. The rest of the cells in the submenu table will contain the images for the various links in the submenu, one per row in the table. They should all be made to be the same width as each other. These images can be wider than the main menu button, if they need to be, but should not be narrower. Set the table's border, cell padding, and cell spacing to zero, and leave the width and height set at Auto.

Side Menus:

If your menu is a vertical menu near the left edge of the page, then the table should contain 2 columns and n rows, where "n" is the exact number of links within the submenu. So if there are 5 links, the table should have 5 rows.

The top left cell should contain a transparent GIF image, if you don't want a rollover effect for the main menu button, or it will contain the rollover image for that button. I usually suggest that this image be wider than the original main menu button. That way the submenu is moved off to the right a little bit and doesn't visually blend into the other main menu buttons. The rest of the cells in the left column will be combined into one cell. Select the second cell in the left column and set it to span the rest of the way to the bottom of the table. Inside of it place a transparent GIF image and size it to the same width as the image in the top left cell, and set it's height to the total height of the remaining cells. Select this transparent gif and turn it into a link set for "#".

The right column will contain the images for the various links in the submenu, one per row in the table. They should all be made to be the same width as each other. It doesn't matter if they are wider or narrower than the main menu button, as long as they are the same size as each other. Set the table's border, cell padding, and cell spacing to zero, and leave the width and height set at Auto.

Completing the Submenu:

Select each of your submenu images and turn them into links. If you want them to be rollovers, I suggest you create the rollovers manually, by adding SetImageURL actions to their Mouse Enter and Mouse Exit events, rather than use the Rollover button. This is because of potential problems with the Rollover Button inside FBs.

If you want a border of some kind around the submenu, either simply draw it into the images that make up the buttons in the submenu, or add extra rows and columns to the table and put images in them to make the border.

Before moving the submenu into place, go to your Edit menu and "Hide Invisible Items". The gold icons for FBs, and other invisible items in the layout will affect the placement of the submenus.

Now select the FB containing your submenu and drag it into position on the page. The image that is either a transparent GIF or the rollover of the main menu button should align exactly over the main menu button image. Once it is in position, go to the inspector and set the name of the FB to something that makes sense, such as "submenu1". Do not use spaces, underscores, or capital letters in the name. Next set the depth to "10". Finally, uncheck the "Visible" checkbox.

Repeat the above instructions for each of the main menu buttons on the page, so that you have a submenu FB and table for each main menu button.

Adding the Hide Mask