In this tutorial I will show you a super easy way of creating a simple pop-up menu system using Macromedia Fireworks. Fireworks seems to be a forgotten and unused program. A lot of designers like to stick to using Photoshop to create their layouts. This is good since you can get some crazy good effects using Photoshop, but by using Fireworks it’s easier to make simple sites and the transition to Dreamweaver will be smoother.
1.) Start out by creating you new document, I’ve chosen a 100 by 100 pixel square but the size is up to you.
2.) Now, type in the text you want to use for your navigation menu. In this example I used About Us and Portfolio. We’ll create the pop-up menu for About Us only. Again, the text can be up to you.
3.) After this you can lock your layer and create slice boxes over the text using the slice tool. Now, click the little target in the middle and select Add Pop-Up Menu… as shown
4.) After clicking on Add Pop-Up Menu.. this editor screen will show up. This is where you edit the menu and the sub-menu navigation text that shows up.
5.) Here are the links I’ve added to the About Me menu. I’ve set # as the link, this is a null command which means that clicking on the link won’t actually take you anywhere. Target is set to ” _self” so when there are links they’ll open in the same window once clicked.
6.) Click Next or the Appearance tab at the top. Here you can choose how the menu will appear…makes sense right? I’ve chosen the image setting at the top so you can get a little more cooler effects with your menu. I’ve stuck with the default but this part is completely up to you. Experiment with the different styles and colours ;).
7.) Over to the Advanced tab you can set the cell width, height, padding, and spacing. You should leve these set at Automatic unless you know what you’re doing or feel like messing with the settings. I suggest changing the menu delay from the default 1000 milliseconds to about 200-300. 1000 milliseconds is too long to wait to see the sub menu pop-out.
8.) The last tab is the Position settings. You can choose where the menu ill pop out of. I’ve chosen the top right of the slice. This setting you can change depending on how your web layout is setup.
9.) After clicking Done when you feel you are finished with the editor your document will now look like this. You can see the position of the sub menu and where it’ll pop out. If you don’t like it’s position you can click and drag it around to a better place.
10.) Now, preview your menu in a browser. File > Preview in Browser > Preview in… whatever your browser is.
And you’re done! Make sure that keep ALL of the files create, especially the .js file. That’s what runs the menu system.
You can view my example of the Fireworks Pop-Up Menu here.
Be sure to check out my other graphic design tutorials!
You Should Also Check Out This Post:
- 5 Worst Website Designs in the World!
- CSCS @ Grand Bend Motorplex
- HDR Fun
- Top 5 Automotive Photography Portfolios
- New Blog. Yes, You Heard Right.
More Active Posts:
- Create Easy Drop Down Menu in Macromedia Fireworks (51)
- Jump Aboard the Technorati Fave Train (16)
- Win Ad Space on Sean-Dinner.com (14)
- The Thinking Blog - A Review! (12)
- My First E-Book • Creating Fancy Screenshots (12)
- Create Your Own Cartoon Using Macromedia Flash • Tutorial. (10)
- My Name Is My Domain Continuation (10)
- The New Facebook Sucks! (10)
- It's My Birthday! (9)
- Make Money Online With John Chow (8)
It makes me happy to hear that you are happy haha. 
.
awesome man, keep up the good work