<<Back to Web Design Graphics Tips and Techniques

Pop-up menus are menus that display as the pointer rolls over or clicks a triggering slice or hotspot. They give your pages a great deal more navigational flexibility without long download times. You can define the appearance of the pop-up menu so that it matches the overall look and feel of your Web site. A pop-up menu is similar to a table: each menu entry is like a table cell. You can customize the menu by choosing from a selection of font types, cell colors, and background image styles.

The Set Pop-up Menu wizard walks you through building the menus from start to finish. Menus are created in two stages. In the first stage you can enter menu text, create submenus, and specify the URL addresses the menu entries point to.

The second stage lets you define the menu's appearance and lets you specify a background image, a font, and the Up and Over states for the menu entries.

The following steps show how to create basic menu entries for a pop-up menu.

To create pop-up menu entries:
Place a slice or hotspot onto the object you want to use to trigger the pop-up menu.

1. Choose Insert > Pop-Up Menu. Then Set Pop-Up Menu Wizard displays.
   
2. Enter a menu item in the Text field.
   
3. Specify the Web address of the menu item in the Link field.
   
4. If necessary, set a Web target.
   
5. Click the Add Menu (+) button to add the entry to the preview list.
   
6. To create a submenu, select the menu item you want to demote from the preview list, and click the Indent Menu button. To return it to menu-item level, click the Outdent button. Note: You cannot demote the first item in the list to a submenu.
   
7. Repeat Steps 3 through 7 until you've added all menu items to the preview list.
   
8. Click the Next button to continue.

Once you have entered your menu text, the wizard's next screen lets you define the menu's appearance.

To set the appearance of a pop-up menu:

1. For Cells, choose either HTML or Image:
   - HTML sets the Up and Over states for the menu background using HTML formatting.
   - Image lets you use images for the menu's Up and Over background.
   
2. Select the appropriate font, and enter any other font information, such as size, justification, and typeface.
   
3. In the Up State and Over State boxes, define the appearance of the menu:
   - If you selected HTML in step 1, choose the text and cell colors for each state.
   - If you selected Image in step 1, then select the two background images the menu will use.
   
4. Click Finish.

When you insert a pop-up menu, a blue outline of the menu appears on or near the slice. The outline looks
like a blank table linked to the slice by a drag-and-drop behavior line.

Note: The number of cells in the outline mirrors the number of main menu entries. Submenu entries are
not represented by cells in the outline.

Editing a pop-up menu
You can edit the contents of a pop-up menu, rearrange the menu items, and move the pop-up menu outline so it appears anywhere on the canvas. You can edit a pop-up menu by opening the Set Pop-Up Menu wizard and updating the menu's contents. There are two ways to open the Set Pop-Up Menu wizard: Double-click the pop-up menu outline. Double-click the Show Pop-Up Menu behavior for the slice in the Behaviors panel.

To change the text of a menu item:

1. Open the Set Pop-Up Menu wizard.
   
2. Select the menu item. The menu item's details fill the Text, Target, and Link fields.
   
3. Edit the menu item.
   
4. Click the Change button.

To rearrange a menu item in the menu:

1. Open the Set Pop-Up Menu wizard.
   
2. Drag the menu item to a new location in the preview list.

To changing the position of a pop-up menu:
You can move a menu outline so that the pop-up menu appears anywhere on the canvas. By default, the menu appears on the slice to which it is attached.

1. Select the slice that the pop-up menu is attached to.
   
2. Drag the outline to the new position.

To export a pop-up menu:
Fireworks generates all the JavaScript necessary to view the menu on a Web browser. When the document is exported, this JavaScript is exported to the same location as the rest of the files, in a file called menu.js. When you upload your files, menu.js should be uploaded to the same directory location as the Web page containing the pop-up menu. If you want to post the file to a different location, then all the hyperlinks referencing menu.js in the Fireworks HTML code must be updated to reflect the custom location.

If your document contains several pop-up menus, Fireworks does not create extra menu.js files; only a
single file is used per document.

When you include submenus, Fireworks generates an image file called Arrow.gif. This image is the tiny arrow that appears next to a main menu entry that tells users a submenu exists. No matter how many submenus your document contains, Fireworks always uses the same Arrow.gif file.

<<Back to Web Design Graphics Tips and Techniques