In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

An example of a CSS menu
This tutorial takes only 25 minutes to complete. How to make pop up menus quick and easy

With Fireworks 8 you can now design a decent pop-up menu with an optional rollover. The pop-up menu can even have submenus (several menus deep). You can customize the color, the borders, the size of the menu itself and its positioning. There is a wizard driven command that gives you a ton of control over the look and feel of the menu.

Perhaps you are thinking, "wait, I've already seen this in previous versions of Fireworks". And I'd have to say that you were correct. But there is a major difference now, and that is the ability to make the menus using CSS instead of JavaScript. Not only can you use CSS now but the CSS can be in a separate Stylesheet. The options I believe are turned on by default but be sure to check by going to File | HTML Setup | General and check that the two CSS options are both checked.

You can also convert pop up menus you made in previous versions of Fireworks to the new CSS based menus. To do this you simply open the menu file, change the HTML setup to use CSS styles and export again.

To begin this tutorial open Fireworks with a new canvas or an existing site. If you'd like to use my file then open BBC.png from the zip file. This is only a mockup for a client and not a completed site. (see Figure 1)

How to make navigation using symbols
Add text and/or images
The first step is to add text links or image links that you want to use for the navigation. This example uses the font, Freestyle Script, size 52, color white, smooth anti-alias, and the word Service. (see Figure 2)

Using Symbols
Select your text or image (Service), press F8, name the symbol and select Button and click OK. Press F11 to open the Library. Notice your button symbol is there. Drag the button name from the Library to the canvas-2 times. Notice that the symbol "copies" have a little arrow in the bottom. This indicates that this button symbol is attached to the original. With a symbol, when you use edit it as seen next, it will change all instances of the symbol.

Editing Symbols
To edit a symbol, double click on Service to open the Button Editor. Click the Over tab and the Copy Up Graphic. Make changes to the over state and repeat for other states if desired. Click Done. All instances will be changed.

Link Names and Linking
I know I said if you edited the symbol all instances would be changed. The exception is that you can change the text on individual buttons. It wouldn't be much use otherwise. To change the names of additional instances of the symbol, select them and change the name in the Text field in the Property inspector. You can also add the link in the link field. Click Preview to see the rollover effects.

Tip: When adding links use relative links (you'll need to know the site structure).

Adding a Pop Up Menu
Adding the menu to the first button
Select Service, go to Modify|Pop-up Menu|Add Pop-up Menu. In the Content dialog box, add menu names and links (# is a null link). To indent a menu item (which is a sub of the menu above it), use the indent button (the second blue icon to the right of the + - icons).

Tip: If you aren't using a symbol then you need to insert a slice to your navigation element prior to adding the Pop-up menu.

Setting the menu Appearance
Select the Appearance tab. (see Figure 3) Here you set the menu colors, vertical or horizontal menus and HTML or text buttons versus an image. Also choose the button color and the text colors. In the bottom pane you'll see a preview of the menu.

Links and Styles
Select Image from the styles icons for an image link. To add a custom style, export from Fireworks and save in the Fireworks program files. Navigate to the Configuration folder then the Nav Menu folder and save. Your custom style will then show up in the editor.

Advanced Menu Options
Set the cell width and height or choose the automatic option to scale the menu automatically to the text. You can add padding and border effects if necessary. With no border you won't see a line between the links.

TIP: When I want the lines between links and no outside border, I make the border and highlight color the same as the background. This is what I did in the sample project.

Set the Position
In the Position dialog, select the position of the menu. (see Figure 4) This exercise is using the menu below the trigger. Select the submenu (the one to the side of the submenu) and click Done.

Edit the Position
In your document, select the button slice and you'll see a blue outline for the submenu. Click and drag the blue area to visually place the submenu. Right click on the slice and select Edit Pop-up Menu. Select the Position tab to see the placement change.

Tip: Repeat steps 5-10 for each separate link.

Prepare to optimize and export for use in Dreamweaver
You could optimize and export right from the client document (the comp file) but it would require a lot of work. This menu will be "floating" above the background elements in a DIV so I don't want the yellow bar or the image to show up with the navigation. It helps to know what your final use will be prior to exporting. Plus I like to keep my Fireworks menus in a separate file.

To remove the menus from the comp document, simply select the first menu, press the Shift key and select each of the other completed menus. Select Edit|Copy or Ctrl+C. Choose File|Open|New (black canvas) and paste (Ctrl+V). Save your file.

The sample file in the zip file is named menus.png and only Services is completed. (see Figure 5)

Optimize the image
Using menus.png, in slice view select the slice over the text and select the Preview tab. Open the Optimize panel (F6). In the Optimize panel select the file format. Since this is text GIF is best.

Set colors and Transparency
Select Index transparency to remove the background color. It will leave a bit of black on the edge but for our purposes that is fine. Use 64 colors, any less and the anti-aliasing won't be as good. Set Matte to none.

HTML setup
Choose|File|HTML setup. In the General tab be sure the 2 CSS options are checked. In the Table diaglog, select "Space with a single table, no spacers" and select "Use Canvas color". Click OK.

Export the menus
Select File|Export, the export should be set to HTML and Images so you get the CSS menus and the JavaScript. Be sure slices is set to "Export Slices" and do not check "include areas without slices". Export to you root folder.

Files to upload to your server
You should export all your graphics from Fireworks into your sites root folder. The export folder we just completed is in the BBC site. (see Figure 6) Note the files that got exported. There is a JavaScript file and a CSS menu. The JavaScript file needs to be in every folder that has a page using the menu. If you don't do this, the menus won't work, this is a limitation of the Fireworks pop-up menus. They are CSS based but there is a small bit of JavaScript still utilized. These are not pure CSS menus but a huge improvement over previous versions in Fireworks and Dreamweaver. Also note the images folder. The rollovers and an arrow for the submenus were automatically exported. You may want to rename the images.

Putting the menus into a Dreamweaver layout
Define a Dreamweaver site
Before you start, copy the source.zip to your hard drive.

Go to Site|Manage Sites and click on New site. Name the site and navigate to the sites root folder (BBC). You'll need to also setup the Remote server before you can upload from Dreamweaver. (see Figure 7)

Setup the FTP
Click on Remote Info (Advanced tab). For Access select FTP. Fill in your host info (URL or IP address) as well as your FTP login information. Click OK when you are finished then Done to close.

Open the starter file

In the Files panel (F8) you see the site structure. Double click on bbc.html to open it. The purple box is what we'll be using. Don't worry, it won't stay purple!

Insert the pop-up menu
Click inside the purple box and select Insert|Image Objects|Fireworks HTML. Browse to the Export folder and select menus.png, click OK. The menu will now be in the purple div box.

Edit the CSS
To edit the style that makes the div purple, open the CSS styles panel (Shift+F11) and you'll see this sites styles. Menu.css was added by the Fireworks insert. Scroll down towards the bottom and select #menu. In the Properties for "#menu" area, click the background color box and click on the Trash can to delete it.

Preview in a browser
Press F12 to preview in your default browser. Test the Services rollover. Do you see your menu? If not then you need to go to the Export folder of the BBC folder and copy the mm_ccc_menu.js file and paste into the BBC folder so it's with the bbc.html file.

That's all there is to building a CSS dropdown menu!