Introduction:

Drop down menus are quite popular on web sites these days, but exactly how to create them is often confusing to the web designer. These tutorials will attempt to simplify this process.

Some sites use custom javascript, or javascript that has been created for general purpose menus that the user customizes by changing a number of parameters in a setup file. These are often fairly complex to customize, and many of them have drawbacks, such as not working well in all browsers, or being very slow to load. The menus I will show here are all fairly simple methods that use standard objects in GoLive.

Some menus are easier to create than others. It depends on how your page is displayed, and where on the page the menus will show up. The simplest ones to create are when the menus are in fixed positions on the page, such as either a row going to the right, or a column going down, that are a specific number of pixels from the top left corner of the page. It is a bit more complex to make them when the menus are centered on the page and will be in different positions as the browser size changes.

These tutorials will cover all of these variations. These tutorials were made with GoLive 5, but the concepts should work with other versions of GoLive that support Floating Boxes. They assume that you know how to use GoLive to create tables, add images, and create Floating Boxes. To keep the text smaller, I will refer to Floating Boxes as "FBs", and to GoLive as "GL".

First a word about using FBs.When you place FBs on your page, a small gold icon will show up in your layout view wherever the cursor was on the page. This is different than the FB itself, which you can move around on the page. The tiny gold icon represents where on the page the actual HTML code for the FB will be placed. You do not want this code to be inside of a table (or grid) on the page, since in some browsers this will cause the page to get distorted.

Always click in the upper left or lower left corner of your page before adding an FB, so that the icon for the FB shows up outside of any tables on the page. If your page contains a table that goes right into the top left corner of the page, and you have set the page margins to zero, this may not always be an easy thing to do. It is probably easier to place them at the bottom of the page, at least while creating the page. If your page contains a table that goes flush to the bottom of the page, you may want to add a blank line after the table while editing, to make it simpler to place the cursor under your table. This blank line can be deleted after the page is complete.

Basic Concepts:

All of the menus in this tutorial work basically the same way. They are made of a series of Floating Boxes, containing the submenus, that remain hidden until the user mouses over the main menu. Then the submenus are shown. In order to know when to hide the submenu again, there are transparent GIFs placed around the submenus that detect the mouse moving off of the submenu and then hide the submenu from view. The main differences between the different types of menus covered here are in the way that the submenus are contained in the Floating Boxes, and the way that the transparent GIFs are placed on the page.

To keep things simple, I will make these menus using graphics for each element because text on a graphic has a known, fixed size, which simplifies things. Most of what is shown here will work the same for text based menus, but text is not as exact in size, so you have to take care to make sure those size changes don't hurt the look of the menu. I have tried to be consistant with the terms used here, and will define the most common terms first.

The menu consists of a set of "main menu buttons". These are the names of each dropdown menu, and are the words that the user sees at all times. The "submenu" is what shows up when the user moves the mouse over one of the main menu buttons. The submenu contains the links to the various pages. In addition to the submenu, an invisible area also shows up at the same time as the submenu. It is invisible to the user, but it detects when the user moves their mouse away from the submenu, so the menu knows when to hide the submenu. I will call this area the "hide mask".

At this point, this tutorial will split into two tutorials. The first one is based on your menu being in a fixed position on the screen. The other tutorial is based on the menu "floating", or being centered on the screen, and moving to different positions as the browser window is resized. Both tutorials assume that you have already created the needed graphics for the main menu buttons and the submenus in some type of paint program, like PhotoShop.

These tutorials are very detailed, but in reality the process is fairly simple. Once you have done it, you can do it again quite quickly.

Fixed Position Menus

Floating Menus