How to Create Drop Down Menus in Fireworks

How To Create Drop Down Menus in Fireworks

Creating drop down menus doesn't take much time. It seems drop down menus have become the thing on many sites. If you have Macromedia Fireworks, making drop down menus can be made fairly easy. In order to make drop down menus you will need a little basic knowledge in fireworks and dreamweaver. Follow the easy steps below to make a drop down menu for your site.

Step 1
You will need to create a button or image that you would like to use for your drop down menus.

Step 2
You will need to insert a slice to the image. To do this simply click "Edit -> Insert -> Slice". Once you have done that there will be a green box over your image.

Step 3
Right click on the green slice you just made. A box will drop down and in that box click on "Add Pop Up Menu". A box will appear called "Pop up Menu Editor".

Step 4
Under the content tab, double click in the text field. Type the name of your choice in the field. Once you have done that click the (+) symbol to add more items. When you have entered all your names, click next.

Step 5
Now you will see the appearance section. In this section you can change the color of the text, cells, and change the font size to your liking. Also in this section you are able to choose if you want a vertical or horizontal menu. Once you have done all of that, click next.

Step 6
Your next section will be the advanced section where you can choose the cell padding, border color, and shadow. Once you have finished that, click the next button.

Step 7
Now you are on the last tab which is the position tab. In this section you can choose where you would like your menu positioned. Once you have chose your position, click done.

Step 8
At the top of your window click "File -> Preview in Browser" Once the browser loads, roll your mouse over the button and your menu will drop down.

Step 9
Go back to fireworks and export the images and layout. To do this, click "File -> Export and choose the place that you would like to store the files".

Step 10
Go to the folder and look for the file you just saved. It will be called mm_menu.js and that has the code for the drop down menu.