Web Page w/ MFW > Create N Edit a Pop-Up Menu - Lesson 05

A pop-up menu is a menu that appears when you move the pointer over a trigger image in a browser. It contains a list of items that link to other web pages. Here you’ll create and edit a pop-up menu that lists Global’s airport locations.

Create Pop-Up Menu List Items

First you’ll create the pop-up menu list items using the Pop-up Menu Editor.

1. Select the slice covering the Worldwide Airports graphic.
2. Choose Modify - Pop-up Menu - Add Pop-up Menu. The Pop-up Menu Editor opens.
3. Double-click the text box in the upper left corner (Windows only).
4. Type North America in the text box and press Enter. The next text box is highlighted, ready for you to create another entry.
5. Type Europe and press Enter.
6. Create three more entries for Africa, Middle East, and Asia/Pacific.
7. Double-click the Link text box for the North America entry.
8. Enter a working URL of your choice and press Enter. For the purposes of this tutorial, any URL will do. Be sure it’s an actual URL so that you’ll be able to test your links later.
9. Enter URLs for the remaining entries. Note: There is always one extra line at the bottom of the entry list in the Pop-up Menu Editor. It’s there so you can easily add new entries without having to click the Add Menu button.
10. Click Done to close the Pop-up Menu Editor. In the workspace, an outline of your pop-up menu appears attached to the slice.
11. To test your pop-up menu, choose File > Preview in Browser > Preview in [your preferred browser] to preview the document in a browser.
    
    Note:
    Pop-up menus must be previewed in a browser; they aren’t visible using the Preview tab in Fireworks. When the document opens in your browser, move the pointer over the Worldwide Airports graphic. The pop-up menu you created appears. Click each entry to test the links.

Customize the pop-up menu Next you’ll return to the Pop-up Menu Editor to modify the appearance of the pop-up menu:

1. In Fireworks, double-click the pop-up menu outline. The Pop-up Menu Editor opens with your entries displayed.
2. Click the Next button. The Appearance tab appears. This is where you can change the colors and fonts used in pop-up menus.
3. Choose HTML as the cell type and Vertical Menu as the alignment.
4. Choose Verdana, Arial, Helvetica, sans-serif as the font and 12 as the font size.
5. In the Up State section, set the text color to black, if black is not already selected. Then click the Cell Color box. If CCCCCC is not already displayed in the text box at the top of the color pop-up window, enter CCCCCC and press Enter. These color values are the default colors selected in the Pop-up Menu Editor if you’ve never created a pop-up menu before. After you change these colors, they will be used every time you create a pop-up menu, until you choose other colors.
6. In the Over State section, set the text color to White if it’s not already selected, and click the Cell Color box. Click the eyedropper pointer on the blue rectangle on the canvas that surrounds the Worldwide Airports graphic, as shown below.
7. Click the Next button. The Advanced tab appears. The Advanced tab allows you to change various cell and border properties. Here you’ll increase the cell width, making the pop-up menu appear wider.
8. Choose Pixels from the Cell Width pop-up menu. This activates the Cell Width box.
9. Enter 137 as the cell width.
10. Choose Automatic from the Cell Height pop-up menu, and click the Next button. The Position tab appears. This is where you can specify the position on the screen where the pop-up menu will appear. Coordinates of 0,0 mean that the upper left corner of the pop-up menu will align with the upper left corner of the slice that triggers it. There are also several preset positions you can choose from.
11. Enter 3 in the X and Y Menu Position boxes, then click Done. Note: You can also reposition a pop-up menu by dragging its outline in the workspace.
12. Preview your pop-up menu changes in a browser. Move the pointer over the Worldwide Airports graphic. The pop-up menu is positioned differently and appears wider. Roll over each entry in the menu to see your color changes.
    
    

Edit The Pop-Up Menu

Next you’ll use the Pop-up Menu Editor again to add another entry to the pop-up menu. You’ll also change the order of entries and add a submenu.

1. In Fireworks, double-click the pop-up menu outline.
2. Click the Europe entry to select it.
3. Click the Add Menu button above the entry list. A blank line is inserted.
4. Double-click the Text field of the new entry and enter Latin/South America. Click anywhere outside the Text field to apply the entry.
5. Drag the Latin/South America entry up one line and release the mouse button. As you drag, a black line indicates where the entry will be dropped if you release the mouse button at that point. The entry is dropped where you specified.
6. Select the North America entry and click the Add Menu button.
7. Double-click the Text field of the new entry and enter United States. Then click anywhere outside the entry fields. Be careful not to select another entry, however.
8. Select the United States entry if it’s not already selected, and click the Indent Menu button. The entry is indented beneath the North America entry.
9. Click the Add Menu button again, and create a new entry for Canada. You’ve just created a submenu that will appear when you roll over the North America entry in a browser.
10. Assign URLs to all the new entries. Optionally, you can delete the link for North America, because users will be choosing items from its submenu.
11. Click Done to close the Pop-up Menu Editor, and then preview the pop-up menu changes in a browser.