Vertical and Horizontal Drop Down Menus in Fireworks
Requirements: You need Dreamweaver and Fireworks
and basic knowledge of these softwares
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
- Create an image/button that you would like to use drop-down
menus (e.g. service or portfolio as seen on our site)
- 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
- Double click in the text filed under the content tab and enter
the name of the menu item (e.g. Website Design).
Click on the '+' symbol to add more menu items.
- Click on Next when you complete entering the menu items
- 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
- Click on Next. You will be taken to the Advanced tab where you
can specify the cell padding, border color and shadow.
- 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.
- Click on Done.
- Choose File/Preview in Browser. You will see the drop down menu
on rolling over the button.
- 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
Please Like, Tweet or Share this page if you found this resource useful!