Fireworks MX Drop Down Menu Tutorial
Fireworks MX Drop Down Menu Tutorial
In the course of working at my new job, I have become fairly accustomed to Fireworks MX. I used to think that it was a far cry from the power of other graphics programs like Photoshop or Quark. It really isn’t. What I like most about Fireworks MX is simple - almost everything that you need or want to know about an image can be found from a simple right-click on the canvas (not on the picture, on the gray part). The main thing that I used it for was to create transparent GIF page headers, and also for their pretty cool drop down menus. The trouble with the drop-down menus was that I couldn’t find a resource to explain what all that generated Javascript meant. See, when Fireworks makes a drop down menu…tell you what, let’s step through how to make a drop down menu and I’ll explain it as we go.
Step one in any tutorial - make sure that you have the program that the tutorial is about. For those of you that don’t (I can’t imagine that you wouldn’t have it, but still…), skip over to Adobe’s site and download it.
Start it up and open a new document. Remember that we’re doing a menu, so it doesn’t need to be huge. We’ll make this a horizontal menu, so set the width at 750 pixels and the height at 50 pixels. For most 800×600 resolution monitors, this will fit quite nicely. For monitors bigger than that, we can set it to center on the web page later.
Okay, now we’ve got a blank canvas. Make sure you have the Layers window open (if you don’t, press F2 and it will pop up). It’s probably safe to assume that you want to have a line of text open up the drop down menu, so we’ll do that first. Click on the ‘A’ on the Toolbar (the Text tool) and type what you want the main menu will say. I spaced it out with just text and then inserted Rectangular Hotspots over the text.
Okay, we’ve set up our text and hotspots. Now click on one of the hotspots and go up to the “Modify” tab on the top menu. Select “Pop-up Menu” and then “Add Pop-up Menu…” from inside the menu. This brings up the Pop-Up Menu Editor, where all of the customizing will take place.
The first tab says “Content”, this is where the visible text goes, as well as the href links and the target. For Text, I entered ’submenu1′, Link is http://www.brainstorm-multimedia.com, and the Target is ‘_blank’. This means that the user will see the text ’submenu1′, and when they click it, it will open up a new browser page that points to http://www.brainstorm-multimedia.com.
It is interesting to point out an additional note here…when you add more than 1 menu item, a little icon at the top of the Editor becomes enabled that allows for a menu to be indented. This allows a sub-submenu to be created. Nifty, eh?
After you fill in the areas on the Content tab, click on the Appearance tab. This is where the rubber meets the road. I chose the following options, but you are free to choose what you want to:
Cells: Image, Vertical Menu
Font: Verdana, Arial, Helvetica, sans-serif
Size: 18
Left Indented
Up state:
Text: #FFFFFF
Cell: #000000
Style: the one on the top left, like a button…
Over State:
Text: #000000
Cell: #FFFFFF
Style: again, the one on the top left
So that set us up a pretty generic looking menu. Like I said, do what you want to with the colors and stuff, it’s all yours.
When you’re done there, click on the ‘Advanced’ tab. This is where you can choose various layout options, and have the Editor show you the changes as you make them. I kept the Cell Width and Cell Height at Automatic; the reason for this is because it will ‘grow’ to the size of the biggest menu item. Cell Padding is at 3, Cell Spacing is at 0, Text Indent is at 0, and Menu Delay is set to 500ms. I still have Show Borders enabled with a Shadow of #FFFFFF.
After you’re done with the layout, click on the Position tab. This allows you to set where you want the menu to come out, but we’re going to change that in just a second. I clicked on the second one from the right, with the submenu slightly offset from the main menu. If you selected to have sub-submenus, you can choose the position of those here as well. When you choose what you want, click on Done and see what you’ve created!
When you click Done, you should a blue set of squares, depending on the number of submenus you opted to create. Click on the submenu and drag it underneath the first menu, wherever you want it to be. I always like it to be directly underneath and centered. And that’s just about it. The rest of the menus are made exactly the same way as this one was created. After you create all the menus, all that is left is to export it by going to File -> Export (HTML and Images should be selected) and choosing a name for the menu.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
Hey Shoop,
Be sure that you’ve got all the files that FW makes, there should be a mess of JavaScript there that must be there. Also, be sure to get the images that FW created when the menu was created.
Let me know if you’re still having trouble.
Once you have created the menu in FW, can you save the fireworks file to be opened later for edit? If so, what format do you save it as?
You can save it as a regular Fireworks PNG file, that will save all of the formatting and stuff for editing later. The menu will still be there also, along with all the JavaScript that gets generated by Fireworks when you save the menus.
Hi. I completed your tutorial and generated a good drop down menu with sub menus. When i preview this in Fireworks it works and looks good. When i put this on my WEB site in Dreamweaver it works well but the little arrows that show the sub menu appear as little red crosses. What have i done wrong please .
Thanks
Be sure that you exported everything out of Fireworks, images included. It sounds like the images selected for the mouseover actions weren’t exported with the HTML. Try that and see what happens, post results here if you would like.
Just explian to me please the best way to export everything out of fireworks please. Also when you put the image in the document using dreamweaver what is the best process to use.
Thanks
Fireworks should export the images needed for the drop down menu. Once Fireworks does this, put the images in a folder in your webroot and make sure that the HTML generated by Fireworks references these images correctly. If you’re using Dreamweaver, you will be able to reference the images in either Code or Design view. If they don’t show up in Dreamweaver either, then the reference is invalid and needs to be fixed. You will need to point to the correct image file in the folder containing the images for the drop down menu. After that, save the file and be sure to upload the images to your website and it should work.
I have looked in to my problem a bit further. It appears that Fireworks is exporting the files ok. In my case it has generated files Pop.htm, Pop.png. Pop_r1_c1_gif, Pop_r1_c2_gif Pop_r1_c3_gif Pop_r1_c4_gif. I have named the file pop.
These are all in the Dreamweaver directories locally and remotely (on the WEB site)
Still the small indents arrows do not appear on the WEB site, red crosses appear were they should be. All the other areas of the pop down menu work great on the WEB site. Take a look if you like http://www.hedgehoppers.co.uk.
Still need some help please?
Thanks
Mike
Can you see the arrows on your local PC? Not on the website, but when you test it there on your PC, do the images show up? If they do, then you’ll need to mirror that exact configuration on the web server, meaning that you’ll have to load up the folder with the images and all the HTML also.
As you can see from the code, Fireworks generates a bunch of JavaScript to render and display the menus, and from experience, I can tell you that it’s very particular about how it works.
I looked at the code in your page, and nothing really jumps out as being wrong, but I haven’t tested your exact code on my system or anything either.
The only thing I can see is that I downloaded the file http://www.hedgehoppers.co.uk/hmfcimages/arrows.gif from your server and I couldn’t open the file in any image editing program I have (Photoshop, Fireworks, etc). From that, I would guess that maybe Fireworks didn’t export the image file correctly, or there was some other issue when loading it to the server that caused the image to become corrupted. Go back into Fireworks and export the file again as “HTML with Images”, load all that up to the server, and try it again. You may want to delete the old images and HTML from the web server first, just to be sure you’re getting a clean load.
Post it here when you get results…
I’m having a hard time loading my tool bar onto my website. When I import into Dreamweaver the bar shows up, but the drop down menus do not work.