FOTD 03: Fireworks 8 CSS Pop-Up Menus

So, we've got a plain-Jane navigation bar in Fireworks that needs some help- we want to add a drop-down menu to the 'Products' section to allow deeper navigation from the menu. Just select a slice or hotspot on your image (this demo made with hotspots for simplicity's sake), then choose “Modify > Pop-Up Menu > Insert Pop-Up Menu...�?. You’ll then be presented with the swanky new Pop-up Menu Editor interface, shown here:

Pop-up Menu Editor - Content Tab

Within the Pop-up Menu Editor interface, you'll find a preview pane at the top, and tabs for Content (manage your links, targets and text labels for the menu itself), Appearance (selection of the color and font themes, style and type of menu), ‘Advanced’ (width, height, padding, spacing, borders and their colors for the menu items themselves), and ‘Position’ (i.e. the x/y offset and placement of the menu in relation to the hotspot/slice that activates it). Let's step thru these options one by one.

First, we've added some entries to the pop-up menu (see above screenshot) by clicking the '+' icon at the top of the list box (or just double-click in the 'ghosted' first entry to start typing), and then entering the link, text label for the menu item, and (if necessary) a target for the link. I generally don't use target attributes, so will leave that column blank if you don't mind. ;-)
For submenus, enter and order your content, then use the two indent/outdent buttons (right underneath the Content tab, for the curious) to 'indent' a given line as a submenu item- it will eventually become a submenu underneath the next highest 'parent' entry. Next, let's click on the 'Appearance' tab, to give our pop-up menu a more custom look. Here's the options available within 'Appearance':

The Appearance tab

Within the Appearance tab, you'll find the following options:

• Cells: HTML or Image
  Specify whether your pop-up menu will be straight HTML, or use images as their background.
• Vertical/Horizontal drop-down menu
  Choose whether your pop-up menu will fly out vertically, or horizontally.
• Font/Size/Style
  Choose the font(s) and font size used for your drop-down menu's text, and both their formatting and alignment.
• Up State/Over State
  Select the background and text color for both the default and 'active' (i.e. the mouse is over it) menu choices.
• Image Styles
  If you have chosen 'Image' as your cell type, you can choose a style for your button's background here (not shown in this screenshot).
• Preview
  As you'd expect- you can preview your changes in realtime down in the bottom-most pane.

For purposes of this demo I've just chosen the HTML style of menu, of course. Let's take a look at what you can specify in the 'Advanced' tab next:

The Advanced Tab

The Advanced tab lets you specify the menu's cell width/height, padding and spacing (width/height can be either a pixel value, or automatically generated), along with a default indent for your menu items and a delay (in closing the menu after a user's mouse has rolled off the 'hotspot'). You can also choose whether to show borders on your menu, a width and color for that border, and whether a shadow/highlight should be added to each menu entry. Next up, the 'Position' tab:

The Position Tab

Within the 'Position' tab, you'll tell Fireworks where you want the pop-up menu displayed, in relation to the hotspot/slice it's attached to. You can choose to have the menu pop up to the left, right, top or bottom of your hotspot/slice, and customize it as needed in pixel values to get things 'just so'.
You can also specify (and/or override) the offset value for your submenus, within the 'Submenu Position' section. Options include offset and aligned with the bottom of the parent menu item, offset and parallel with the parent menu item, or aligned with the bottom/center of the parent menu item. The checkbox can be toggled to make the submenu appear at the exact location of the parent item as well, if that's your intent.

Click "Done", and you’ve just created your pop-up menu! All you need to do now is select the "File > Export..." menu option, and click the 'Advanced' button next to the 'Export' drop-down menu (which should be set to "HTML and Images"). In the first (General) tab of the Options dialog, make sure 'Use CSS for Popup Menus' is selected, and 'Write CSS to an external file' if that's your preference.

The Export Options dialog

Continue your Export process as usual, and you're done!
(Make sure to check out Greg Rewis' blog for a Captivate simulation of this feature, as well. He should have it live shortly after this post goes out- if it isn't live already, FYI.)

One caveat- this feature is in Fireworks and not in Dreamweaver, so you won't be able to round-trip Fireworks popup menus in DW 8 (but as always, you can dive into code mode and hand-tweak if you so desire). And although I strongly recommend learning how to build CSS pop-up menus by hand (and using lists to do so- which really helps both for keeping your (x)html clean and flexible), if you need quick and simple pop-up menus, this feature will definitely be of interest. Of course, there are a wide range of amazing third-party extensions and options for pop-up menus that can offer far more options (pop-up menus have proven VERY popular in the extension development community) - but it's nice to know there's a reasonable, default option available within Studio 8 right out of the box that doesn't rely solely on Javascript to get the job done. Enjoy!