How to Create a Popup Menu in Fireworks - dummies

By David Karlins, Doug Sahlin

A popup menu created in Fireworks uses JavaScript to create its magic. However, Fireworks writes all the code. If you have a lot of pages to link to but only a limited amount of space, a popup menu is the obvious choice. A popup menu, um, pops up (hence the name) when a site visitor pauses his cursor over the button that triggers the pop-up menu.

To create a popup menu, follow these steps:

1Use the Pointer tool to select the button to which the menu will be attached.

A white button appears in the middle of the button. This signifies that you can add interactivity to the button. When you create a button, Fireworks creates a slice that conforms to the size of the button. The slice is saved as an image when you export your menu.

2Click the white button.

A menu appears with a list of interactive behaviors you can add to the button.

3Choose Add Pop-up Menu.

The Pop-up Menu Editor appears.

4On the Content tab, enter the Text, Link, and Target for the item.

The Text is the button label, the Link is the page to which the button links, and the Target is the window in which the linked page opens.

5Click the plus sign (+) to add another item to the menu.

Fireworks adds blank fields for the button’s Text, Link, and Target. Alternatively, you can press Tab to add another item to the menu.

Repeat Step 4 for this button.

6Continue adding the other items to your popup menu.

The figure shows a popup menu with several items.

7Click Next.

The Appearance tab of the Pop-up Menu Editor displays.

8Specify the parameters for the pop-up menu items’ appearance.

Cells: Select HTML or Image. If you choose HTML, Fireworks creates the code for creating the menu items. If you choose Image, Fireworks creates the images for each menu item and saves them when you export the menu.

Menu alignment drop-down menu: Choose Horizontal Menu or Vertical Menu.

Font: Choose a font set. These are identical to the font options you have in Dreamweaver. The first font is the default. The web browser defaults to the next font face if the default font isn’t installed on the user’s computer.

Font size: Choose a font size from the drop-down menu.

Font style and alignment options: These are the same options you find in your friendly word-processing application: bold; italic; and left-, center-, or right-align.

Up State: Click the color swatches and choose the color for the cell and text. As a rule, you choose the same colors as the menu to which the popup menu is attached.

Over State: Click the color swatches and choose the color for the cell and text that appear when a visitor pauses the cursor over a menu item.

9Click Next.

The Advanced tab of the Pop-up Menu Editor appears.

10Accept or modify the following parameters:

Cell Width: Fireworks determines the width based on the menu item with the longest text. To modify the width, choose Pixels from the drop-down menu. This opens the Cell Width text box into which you can enter a value.

Cell Height: Fireworks chooses a height, which can be modified by entering a different value in the Cell Height field. Alternatively, you can choose Automatic from the drop-down menu.

Cell Padding: Accept the default value, or enter a different value. This value determines the area in pixels around the cell text.

Text Indent: Accept the default value (0), or enter an amount by which to indent the text.

Cell Spacing: Accept the default value of 0, or enter a value. If you enter a value, a space appears between each item on your popup menu. We like our menus tight, so we accept the default value of 0.

Menu Delay: This is the amount of time for which the menu appears after a visitor pauses his cursor over the button. If no action is taken within that amount of time, the menu disappears. The default delay is 1000 ms, or 1 second. Enter a different value to increase or decrease menu delay.

Pop-up Borders: The Show Borders check box is selected by default, with a default value of 1. Enter a value to display a bigger border, and then click the applicable color swatches for the border: Shadow, Border Color, and Highlight. This option isn’t available if you choose Image on the Appearance tab.

11Click Next.

The Position tab of the Pop-up Menu Editor appears.

12Click an icon to align the popup in one of the following configurations: to the bottom-right, bottom, top, or top-right of the slice.

After you choose an option, Fireworks inserts values in the X and Y fields. If you want, you can enter different values to further define the positioning of the popup menu. If you have indented menu items, the submenu options appear, which enable you to specify the position of submenus.

13Click Done.

The popup menu is added to the button.

14Choose File→Preview in Browser and choose the desired browser from the menu list.

Your menu appears in the desired browser.