Creating a drop-down (pop-up) menu in Fireworks

First, create a new canvas depending on the shape you want your menu-bar to be (I did a horizontal one).

– Select the “text” tool & type out the options you want to appear on the main menu (i.e. – “locations”, “about”, “menu”).

Screen Shot 2014-04-08 at 8.46.26 PM

Next, create a “hotbox” or a “slice” around the menu option that you want to drop down (I chose “menu):
Screen Shot 2014-04-08 at 9.55.26 PM    Screen Shot 2014-04-08 at 10.07.21 PM

Then you want to make sure the hotspot (or slice) is selected before clicking “modify”–>”pop-up menu”–> “add pop-up menu” :

Screen Shot 2014-04-08 at 8.46.54 PM

…Once you’ve added each of the items to your drop-down menu, you can also add sub-menus to the drop-down by clicking the small, blue square-button (the one to the far-right in comparison to the “+” and “-” ) .

Screen Shot 2014-04-09 at 12.37.15 AM

Once you’ve inserted your text (and links, which I didn’t have because there was no menu to link to), you can also adjust other elements of the menu through the other tabs in the “Pop-up Menu Editor”:

Screen Shot 2014-04-08 at 8.52.20 PM



Finally, I  think it’s always really useful to “Preview in Browser” so you can see what it would look like once it’s live on your website!

Screen Shot 2014-04-08 at 9.01.09 PM


 TA – DA!


Screen Shot 2014-04-08 at 9.02.39 PM


By Olivia Combemale



~ by oc435 on April 9, 2014.

3 Responses to “Creating a drop-down (pop-up) menu in Fireworks”

  1. Your language strategy was to simply outline the procedure and then let the images enhance your words and give extra explanation.

  2. Your text and images worked very well together and relied on each other to instruct the reader.

  3. Your images were used to complement text-based directions that would be naturally hard to follow without some help from images. The two were combined in a way that allows the reader to back up their understanding of the text with visual confirmations.

Comments are closed.

%d bloggers like this: