White Wave Designs

Building a fly-out menu with Fireworks MX and Dreamweaver MX Tutorial

Printer-friendly version

Page One

Before you create your flyout menu, your navigation should already be created, i.e., the section names and subsection (page) names should be determined. It is also advised that colors and fonts be determined beforehand as well. Here is my outline for my sample navigation:

  • About Us
    • Our History
    • Mission Statement
  • Services
    • Products
    • Repairs
  • Privacy Statement
  • Contact Us
    • Email
    • Snail Mail
    • Location and Directions

In Fireworks, create your menus. Make the canvas as long and as wide as you need for the total. I am going to use a "standard" navigation width such as 175 px and to make the canvas height equal to each shape height times the number of shapes, plus 2 pixels space around each. You many need to play with the width to accomodate larger or smaller links. I have checked the width of the longest link, and it fits nicely with Tahoma font 14 pt.

My example menu now contains four 175 px wide and 40 px tall rectangles. Notice I have added 4 pixels to width of my canvas and aligned all the rectangles at x=2 and the top one at y=2. Also, I have added 10 pixels to the height for a 2 pixel space around the four rectangles.

For each rectangle, click on the shape and from the file menu, select Modify/Symbol/Convert to Symbol and then Button (or r-click and select Convert to Symbol, or press F8). Enter a meaningful name, such as aboutbtn. The rectangle will now be highlighted and identified as a button.

Page 1 ~ >>