Macromedia Fireworks Tutorials >> Menus, Buttons & Animations >> Pop-Up Menus

Fireworks: Pop-Up Menus

This lesson is an introduction to using the Pop-Up Menus in Fireworks 4.

Step 1: Creating the Buttons

1. Create some text or shapes to be your buttons
2. Select each button and convert it to a button (F8 or go up to Insert>Convert to Symbol.. and choose Button)

TIP: A quick way to center your text on your shapes before you convert them to buttons is to select both the text and the button and click: CMD-Alt-2 and then CMD-Alt-3 or for PC: CTRL-Alt-2 and CTRL-Alt-3. This centers the objects both horizontally and vertically.

Step 2: Adding the Pop-Up Behavior

1. Select one of the buttons you just created to insert the drop down menu in. In this example I selected the Services button.
2. Add the Pop-up menu behavior by right-clicking on the Drag and Drop behavior handle in the center of the button. (You can also go up to Insert>Pop-up Menu...)

Step 3: Creating and arranging the Sub Menus

The Pop-up dialog window comes up. Here is where you enter the names of your menu buttons.

1. In the Text field, type in the name of your first button item. In this example, I typed in Design.
2. In the Link field below, type in a URL for the button to go. This can be a real link or a dummy link (#) if you just want to follow along.
3. In the Target field, select an option if you have one or leave it blank if you want the new page to replace the current page.
4. Click the "+" sign to Add the menu item or click Enter/Return on your keyboard (my preferred method)
5. Continue adding as many buttons as you like.

Step 4: Creating and arranging the Sub Menus

When I created my buttons, I also included some sub menus that will go beneath other button. For example, I have two buttons called Flash Design and Print Design. These are actually submenus for Designing.

1. Click on any menu buttons you have that are to be sub menus for another button.
2. Drag them right below the button they are to be a sub menu of.
3. Once the buttons are in place, click the Create Menu/Indent Menu icon at the top of the dialog window. This will automatically indent the menu item.

To watch a quick movie on this, click the image below. (QuickTime is required)