How to Embed a Video in a Web Page
How to Create an MP3 File
How to Add Images to Your Web Page in CoffeeCup

How to Create a Popup Menu in Fireworks

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:

1

Use 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.

2

Click the white button.

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

3

Choose Add Pop-up Menu.

The Pop-up Menu Editor appears.

4

On 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.

5

Click 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.

6

Continue adding the other items to your popup menu.

The figure shows a popup menu with several items.

7

Click Next.

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

8

Specify 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.

9

Click Next.

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

10

Accept 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.

11

Click Next.

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

12

Click 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.

13

Click Done.

The popup menu is added to the button.

14

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

Your menu appears in the desired browser.

blog comments powered by Disqus
How to Create and Encode Flash Video
How to Create a Navigation Menu in Fireworks
How to Create a Simple Two-State Button in Fireworks
Resize Your Photos for the Web with Fireworks or Photoshop CS6
Optimize GIF Artwork in Fireworks
Advertisement

Inside Dummies.com