 |

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!
|
 |