Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Drop Down Menus  

 

Featured Fireworks & Dreamweaver Template

Beauty Template 8
Beauty Template
Inner Page Design
$59.95

Fireworks Tips and Tricks 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.

Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 45000 templates!

create a free html5 website

Featured Template
Template # 40354
Type: WordPress
Price: $67