home tutorials downloads links
guestbook
contact


For any site containing large numbers of pages, or extensive lists of links to external sources, the FW "pop-up menu" is the way to go. Of all the topics discussed in the Macromedia Fireworks Forums, the Javascript "Pop-Up Menus" are by far the most common. Despite being relatively easy to create, they can be a veritable minefield of problems, depending on how you intend to use them. They can be very awkward to implement if you intend using "frameset" web-pages (they get chopped off at the frame borders!). They can force you to re-think how you would "normally" structure your website (more on THAT later!). "Liquid" pages can be a source of alignment headaches. And worst of all, they force you to do a LOT of thinking before you even set cursor to canvas!!! Creating a suitable pop-up menu "on the fly" is not really a task I would savour.
And that's not the end of it....!
But we'll leave the problems until you run into them. Hopefully, you won't!!! Following a few simple rules will allow you to turn out efficient menu systems every time. Things like... always trim the canvas... always stick your menu in the top-left corner of a marginless page... always blame the server when things don't work... yada, yada, yada!
But, Hell! Let's get on with drawing one of those suckers!!!

STAGE 1
Create a simple navbar -

Start by opening a nice big canvas and drawing a simple rectangular button-shape (20x60pix approx, but sufficiently wide to contain your longest planned text label!).



Give it a suitable fill colour and stick an appropriate text label of some sort on it (e.g. "button", as above).
Click EDIT>SELECT ALL, then click INSERT>CONVERT TO SYMBOL.
Choose "Button" from the list and click O.K.



(Your graphic is instantly converted into a button with a green slice over it, as above. Cool! It's got all of the in-built Button Editor functions with a couple of clicks of the mouse! We'll be using those functions later).
Now, here's a REALLY COOL TRICK!
Hold the ALT key down and click/drag your button to the right (or down, if you want a vertical menu). FW creates and drags an identical copy of the button instantaneously! How cool is that?
Repeat this step with each new button until you have enough for your navbar.
You now need to set the rollover effects and text labels on all of the newly created buttons by:
DOUBLE-CLICKING the green slice over the first button to open the Button Editor. Answer "ALL" to the question it asks you. The first canvas you see will be the "Up-State" canvas, with both the text and the rectangle selected.
Click the "Over" tab and click the "Copy Up Graphic" button. Feel free to now apply whatever rollover effects and text colour changes you would like and close the Editor when you're done. You will now have a series of identical buttons, complete with rollover effects.
The last step in creating the menu is to set the button text for each individual button. So, open the "Object" panel and have a look at the "Button Text" entry, as shown here:

This will show the text label for the button currently selected on your canvas. I'm assuming that you created the correct text label for your first menu button, so we only need to start by clicking button 2 and overtyping the entry in the Object panel with the correct text. Answer "CURRENT" to the question asked. Repeat this step for all remaining buttons. And we're half-way there!!!

STAGE 2
Adding "Pop-up" Menu Behaviour -
In the middle of each green slice, is a small white button. Click the first one and select ADD POP-UP MENU from the list.



The pop-up editor kicks into life with stage one - setting the links! (REMEMBER - This process is setting links for the FIRST button only!).



TEXT
= The label on each menu cell
LINK = Obvious, really! A URL. It's a good idea to have your site links all ready to hand before starting. In fact, make a habit of using the URL PANEL to control all link setting in your projects.
TARGET = The target frame in a "frameset" setup. Clicking this drop-down will display the system default names for Frames used in standard Frameset html pages (i.e. "blank" etc.). If you have used these default names, simply select the appropriate name from the drop-down list here. Otherwise, simply type in the specific name you have given to your target Frame.

For the purpose of this demo exercise (and for speed!), you could type any old rubbish in the text box and leave the link box empty, if you want. When you have completed each entry, click the PLUS SIGN and the entry is put into the bottom window. Repeat the process for each menu cell you wish to create for this button.
At this stage, you may wish to consider whether you need to implement "sub-menus" in your menu structure for this button. This is pretty straightforward. Click the new link that you want to "sub", then click the "Indent" button just above the Text field. FW automatically creates this item as a new sub-menu pop-up from the original and generates and puts in place a small "arrow gif" in the original menu cell to indicate the existence of the sub-menu.
ONCE AGAIN, REMEMBER - THESE LINKS ARE ALL REQUIRED LINKS FROM THE FIRST NAVBAR BUTTON ONLY - NOT YOUR ENTIRE NAVBAR!!!!
So, when you have a nice list of links completed, click the NEXT button.

STAGE 3
Oooohhh!!! Pretty pictures!
This stage is really pretty self-explanatory. The main choice to make here is whether you want simple (and presumably faster-loading) "html" style pop-ups, or "graphical" pop-ups.



You'll see the differences if you swap between the html/graphic options. You pays your money.........
Set the required options for text and cell colour and style, Up and Over states etc and click FINISH when you're done.

One more thing -
Once you have created the pop-up for your nav button and you're still looking at the original png file, you need to align the pop-ups to where you want them to appear (i.e alongside or below the rolled over nav button).
You will be able to see blue outlined frames for each pop-up (if you don't see them, click the slice and they will become visible).



Simply click/drag these frames to the required positions as above. It's probably a good idea to do this alignment as you create each one, 'coz the canvas could get pretty messy! (See also the "Pop-up Positioning" link below if you have alignment problems when implementing your menu in Dreamweaver. Don't miss the "Pop-up Motivator" download!).
Now repeat Stages 2 and 3 for each of your original nav buttons. When you are done, click MODIFY>TRIM CANVAS and then hit F12 to preview your creation.

And there you go! You can see now that they are actually fairly easy things to create. It's implementing them in your site that can be problematic. But I'll leave that to the people who really know what they're talking about! Check out these Macromedia Technote links etc. for some additional guidance:

FRAMESET PROBLEMS - Macromedia's detailed instructions for help in "crossing the border"!

CUSTOM GRAPHICS - Wanna use your own graphics for pop-up button backgrounds? Macromedia tell you how!

POP-UP POSITIONING - Those pesky things just won't go where you want 'em to? Check this out!

DREAMWEAVER TEMPLATES - There just ain't enough hours in the day! DW templates will save you some!

LIBRARY ITEMS - Another time-saving solution from those Guys (and Gals!) over at Macromedia.

SITE STRUCTURE\LINKS - Kim Cavanaugh's excellent tutorial solution for getting to "the root" of the problem!

Have fun!

Take me to the top!