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:
- 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
page.
Social Bookmarking