Vertical and Horizontal Drop Down Menus in Fireworks

Requirements: You need Dreamweaver and Fireworks and basic knowledge of these softwares

In this tutorial you will learn how to create drop-down menus as seen on our site in Fireworks and Dreamweaver MX 2004. It is very easy to create drop down menus in Fireworks. Here are the steps you need to follow:

1. Create an image/button that you would like to use drop-down menus (e.g. service or portfolio as seen on our site)
2. Insert a slice to the image by clicking on Edit/Insert/Slice. You will see a bright green slice. Right click on the slice and click on Add Pop-Up Menu
   
3. Double click in the text filed under the content tab and enter the name of the menu item (e.g. Website Design).

4. Click on the '+' symbol to add more menu items.
5. Click on Next when you complete entering the menu items
6. You will now be taken to the Appearance tab. Here you can specify the color of the text and cells and font size. Here you can also specify if you would like a horizontal or vertical drop-down menu
7. Click on Next. You will be taken to the Advanced tab where you can specify the cell padding, border color and shadow.
8. Click on Next again. In the position tab you can specify how you would like the drop-down menu to appear. You can choose to have the menu appear from the bottom right or left of the slice or above the slice.
9. Click on Done.
10. Choose File/Preview in Browser. You will see the drop down menu on rolling over the button.
11. Export the images and layout by clicking on File/ Export and choose the location where you would like to store the files. Open the folder where you stored the files and you will find that fireworks creates a file called mm_menu.js which has the code for the drop-down menus. The menu items will be coded in the head content of the page.

Please Like, Tweet or Share this page if you found this resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!