UBB.Developers Forums Announcements Announcements U-Zine Articles June 2002 : Creating Dropdown Menus in Fireworks

Many of the features in Fireworks are overlooked. One of them is the built in menu generator. This thing is amazing, you will have a high class, great looking, navigation system working in a matter of seconds. Dont believe me? Well, just continue on with this tutorial and you will see how easy this is.

Start off by making a quick button that you will mouseover for the menu to dropdown. If you have an interface with buttons made already, you can simply use slices and do the same thing. Create a rectangle or any other basic shape to make your navigation. It doesnt have to look terrific, you can touch it up after we make the menus. Next put the text you want on the rectangle. Here I used "menu", pretty creative eh?




Ok, now we have the base. We need to now create the menu. Grab the hotspot tool (or slice if you are using it for an interface and need to cut it up into images), and drag it over the base of the menu. You should get a blue or greenish colored thing above your rectangle. Dont worry, that doesnt show up when you export it.

Note: a hotspot is an area that you can apply certain commands (or behaviors), you can do a variety of effects such as rollover images, and swapping images with these. The slice tool works the same, but split up the image into the pieces that are selected.

Now open up the behaviors docker (window > behaviors). Make sure the hotspot is selected, and click on the plus sign. Then go to Set Pop-up Menu. A popup dialog box now comes up, just simply enter the text to click on, and the link to bring it to for each menu item. You can just leave the target field empty unless you want the link to open in another window, or if you are using frames. Once you have finished adding all the menu items, click next.




This here is the fun part. You can do a variety of effects here. First choose if you want the dropdown to be HTML, or images. HTML will load much faster, but images will most likely look a little better. They both have their advantages and disadvantages so just pick one. Next you need to select if you want the menu to dropdown when the mous goes over, or if it should flyout to the side. I chose dropdown just for fun.



Next choose the text style you want for the buttons. Now is the fun part. You can customize how you want your buttons to look, in the state when it is dropped down, and when the mouse rolls over it. Image is a little more customizable in look. Once you have your style picked out, click the next button.

In this part you can choose how wide, and how tall you would like the menu to be. Or you can leave it as automatic. You can also adjust the cellspacing, cell padding, text indent, and how long the menus should be delayed before hiding again. Cellspacing will add space between the images if you are using images for your menu. The border are pretty self explanitory. Click next when your done there.



This is the last part, where you can choose where you want your menu to appear in respect to the base image. Choose that and click done.

Now youve got your menu. But how do you get it into an html document? Simple. First your going to want to crop it to the base image only. Do that with the crop tool, and select the shape, then double click. You should have something like below.



Now, go to File > Export, and be sure you have the settings the same as below. This will export it as HTML, and images. You can now open up the HTML document you exported, and your menus are there! WOW! Easy eh? You can go on from here to modify your images, and HTML document to create a webpage.

Note: If you are using slices instead of hotspots then you will want to make sure you have slicing on, and your export settings will most likely be different.


Now all you need to do if upload everything. When uploading don't forget to include the javascript file that is exported along with the images and html file!