Making Popup Menus

Making Popup menus using layers, CSS, and the timeline
Pop Up Menus in Dreamweaver (can be adapted for GoLive)

Step I: Setting the Stage, Preparing the Components

1. Create your buttons that will reside at the top of the menu. Keep it simple. I would avoid making that button a rollover. Take note of the width of each button.
2. Now you need to prepare the menus for each button.
3. Go into Dreamweaver, and choose the layer icon in your objects panel. It is in the common category under the table icon.
4. Draw a layer. In the Properties Inspector, you can set the width of the layer to the width of your buttons.
5. Now insert a table with one column and 5 rows (you can change the number of rows later to reflect how many links you have for each button.)
6. Make the width 100%, This will then fill the layer.
7. You can make decisions about border and cell padding. It is usually a good idea to put some cell padding in the cells so that there is some space between the cell border and the content.
8. If you like, you can give your table a border. You can then give your borders a color with the brdr color attribute in the tables inspector (Properties Inspector) You may have to expand the Properties Inspector to see that option.
9. You should now have a layer with a table inside.
10. !!!!IMPORTANT!!!! Select the layer, then in code view add its <DIV> and </DIV> tag and move all the code to just above the closing body tag. </body> Otherwise this won't work in Netscape!
11. Select the layer by its handle (little square at the upper left) and copy it, (Control C or use the edit menu)
12. Now Paste (or control V). You won't see anything because the new layer will be directly on top of the first.
13. Paste again until you have as many layers as you have buttons. Make sure all layers are just above the closing body tag in code view.
14. If you have visual aids set to visible, you'll see yellow icons indicating how many layers you have pasted.
15. You should also open the layers panel. Window>Other>Layers in Dreamweaver MX. Window>Layers in Dreamweaver 4. The function key is F2 on the Mac; I assume it is the same on the PC.
16. You should see your layers named layer1, layer2, etc. in the layers panel. Double click on each of those generic names and give your layers descriptive names so you'll know which one goes with which button. For instance, I named the layer that goes with my about button, well, about! :)
17. All layers can have the Z-Index 1, but set the visibility to hidden. (Click on the eye at the top to toggle them all off.) Prevent Overlaps can remain checked.

Step 2: Creating the Timeline Engine

You need someway to tell your menus to close when the user mouses out. We will use Timelines to create a generic "driver" to accomplish this.
1. Open your timeline. Window>Others>Timeline
2. Name the menu. I gave mine the name "hidemenu"
3. DE-select AutoPlay.
4. Drag the playhead to frame 15. Click in the channel over the main timeline. This is the behaviors channel, and it has a small b at the beginning to indicate it.
5. With frame 15 in the b channel selected, open your Behaviors panel. Window>Behaviors
6. Expand the menus under the plus sign. Go to Show Hide Layers. If for some reason this behavior is grayed out, it is probably because you need to go to Show Events for version 4 browsers and above. (This is at the bottom of the expanding list under the plus sign.)
7. A dialog box listing all of your layers will appear.
8. Click the hide button after selecting each layer name in turn. You want to hide them all.
9. Now drag the playhead back over frame one. (This is important!)

Step 3: Populating the Cells with Links

We'll create a generic link with the correct behaviors attached that we can copy/paste into each cell of each table of each layer.
1. Type the word link. Select it and type # in the link field of the Properties Inspector. Press enter.
2. Place your cursor inside this link. We're now going to use the timeline driver we created in the previous step.
3. Open your Behaviors panel again. From the plus sign go to Timeline>Go to Timeline Frame. In the dialog box, choose hidemenu and leave the frame at 1.
4. The default mouse event is onClick. We need to change it to onMouseOut.
5. Select onClick in the Behaviors panel. An arrow with a scroll down menu appears. Choose onMouseOut.
6. With the cursor still in this link, choose Timeline>Play Timeline (hidemenu)
7. Again, change onClick to onMouseOut.
8. One last time choose Timeline>Stop Timeline.
9. This time change onClick to onMouseOver. If you think about what you want to occur when you mouse over and out with the menus, this will make sense.
10. Select your link, then select the a tag in the tag selector at the bottom of your document window.
11. Copy and paste this dummy link to all of the cells in all of your tables in all of your layers. (To make each layer and table appear, just select it in the layers panel.)

Step 4: Setting up the Buttons

When the user mouses over each button you want the layer with the table and its menu to appear. We'll set that up now.
1. Select the first button. Give it a link or # (placeholder link.)
2. From your Behaviors panel choose Show Hide Layers.
3. SHOW the layer with the menu for this button. Hide all of the others.
4. Change the event to onMouseOver.
5. Now add your Timeline driver behaviors.
6. Timeline>Go to Timeline frame (1) on onMouseOut
7. Timeline>Play Timeline on onMouseOut
8. Timeline>Stop Timeline on onMouseOver
9. Repeat these steps for each button

Step 5: Finishing Touches

1. Select each layer and adjust its position so that it is just under its button. You can fine-tune the position using the Properties Inspector (which becomes a layer inspector when the layer is selected by its square handle at the upper left.)
2. You can add link, visited link, hover, and active link styles (in that order) with CSS.
3. You can also add code to make the table cell change color with mouseOver. Here is a sample <tr> tag you can use as a prototype:
<tr bgcolor="#FFFFFF" onMouseOver="this.bgColor='#0066ff';" onMouseOut="this.bgColor='#ffffff';">
4. Add accessibility features! Make sure the button at the top links to a main category page, and that there are alternative text links for each of the submenu links on that page. For example, if I had a "Tutorials" button with a popup menu that had links for "Dreamweaver" "Flash" and "Fireworks" I would make sure the top button went to a "Tutorials" page, and that the tutorials page had text links for Dreamweaver, Flash, and Fireworks.