Painless Pop-up Menus

Web pages can scroll on forever, but that does not mean your readers will. A savvy designer makes the most of screen real estate. Pop-up menus are one way to pack a lot of information into a small space; when visitors to your site mouse over a button that hides a pop-up menu, a new group of buttons or text links appears with additional menu options.

Pop-up menus can also streamline your users' interactions, allowing them to quickly jump to the pages they need. Say you're developing a nutrition Web site illustrating the Food Guide Pyramid. You build six buttons repre- senting the food groups. When a visitor mouses over a button, such as the one for the Grain group, a pop-up menu appears with additional choices, such as Rice and Pasta. The visitor can scroll down to one of those menu items and go directly to that page.

Macromedia's Fireworks 4 (800/457-1774, www.macromedia.com ) makes it easy to create pop-up menus. You create the images for the buttons, and then Fireworks automatically writes and exports the JavaScript that powers the buttons. In just three steps, you can use Fireworks 4 to create a working Web-page interface with a space-saving pop-up menu.

LISA LOPUCK is an author, Web designer, public speaker, and founder of eHandsOn ( www.ehandson.com ), an online training company for the professional Web and creative developer.

1: Inserting Hotspots
To insert a pop-up menu, you first need to add a hotspot to your main button. These interactive elements trigger pop-up menus. In this step, you'll add six hotspots to the fictitious nutrition site.

Select the Rectangle tool, and create six rectangles, which will become your buttons. With the Text tool, enter the descriptive labels Fat, Oil & Sweets; Dairy; Meat; Vegetable; Fruit; and Grain (A) . For detailed instructions on using the Rectangle and Text tools, see www.macworld.com/2001/03/howto/fireworksbutton.html.

Group each text label with its rectangle by holding down the shift key while clicking on both the text label and the rectangle, and then choosing Group from the Modify menu. Click on the background to deselect the group. Repeat this for each button.

Select all six buttons with the Pointer tool by holding down the shift key while clicking on each label. Choose Insert: Hotspot from Fireworks' main menu. The window that appears asks whether you want a single large hotspot or multiple ones. Click on Multiple. You should now have six hotspots of the exact size of your buttons (B) . Click once on the background to deselect them.

2: Inserting a Pop-Up Menu
With all six hotspots in place, you can add a pop-up menu to each one.

Select the hotspot for the Grain button and choose Insert: Pop-Up Menu from the menu bar. In the Set Up window, type the first item for the menu, Bread, in the Text field, and then enter a link in the Link field - here it's bread.html. To add the item to the menu list, click on the + icon (A) .

Now enter the additional choices you want under Bread. Type Wheat, add a link (here bread/wheat.html ), and click on the + icon. With the Wheat menu item highlighted, click on the Create Menu icon (B) to make Wheat a submenu of Bread. Wheat will then be indented below Bread. Now type White, enter bread/white.html, and click on the + icon. To move an item up in the pop-up hierarchy, click on the Promote Menu icon (C) .

Continue in this way until you've completed all the submenus for the Grain category. Click on the Next button (D) to continue.

3: Finishing and Previewing Your Pop-Up Menu
The last step is to fine-tune the pop-up menu's appearance. Fireworks gives you a choice of an HTML or a "button-like" look and lets you control the font and font size.

You can apply various format settings to your pop-up menu. Select the Image option (A) . Choose a font style from the font list, and change the font size to whatever looks best with your typeface. If you feel adventurous, play with the image and color options (B) . Otherwise, click on the Finish button (C) to return to your document.

Back in the document, you'll see a light-blue outline representing your pop-up menu. With the Pointer tool, click and drag it to where you want it to appear (D) .

Repeat steps 2 and 3 to add pop-up menus to the remaining five buttons. To preview your buttons, choose File: Preview In Browser. Then just admire your Fireworks handiwork (E) .

1 2 Page 1
Shop Tech Products at Amazon