Pop-up Menus Revisited

One of the most popular parts of my site seems to be the collapsible menu shootout – a comparison of various collapsible menu approaches (menus that shift downward to reveal submenus.) At the time I wrote it, I did not bother to address the problem of “popup” or “dropdown” menus (see YSM OB/GYN for an example of a Fireworks generated menu system because I assumed everyone knew how easy they are to make in Macromedia’s Fireworks. But I’ve found that really isn’t the case. People aren’t generally aware that Fireworks has that capability, nor how to use it if they are.

Fireworks is probably the easiest way to make popup menus. You design them visually: the menus can be positioned by dragging to the right spot. The popup menu editor makes selecting stylistic options simple and you can always get into it in more detail if you care to get into the javascript that is generated. And they integrate nicely with Dreamweaver.

To create a menu in Fireworks, you first have to create slices, which may be why the function is missed sometimes. The slice or “web” layer is where the javascript elements and behaviors reside, not in the graphics layers. Select a slice, click the little registration mark in the center, and select Popup Menu from the – well – popup menu.

The wizard makes it pretty obvious how to add items, and to create a sub-menu, simply select some items and click the tiny “indent” icon at the top of the Content panel.

The only complicated part of all this is how to handle the generated scripts. Fireworks generates one external script, but puts all the site-specific code inside the header of the html page it generates from the graphics.

I usually cut the script for the menus out of the head section of the html page, and save it as a linked external .js page. I also make sure that all the URL’s in the menus are absolute – in other words they start with http://….

This is so that you can use a single script to run the navigation for the entire site, and the URLs will work no matter how far down you drill – no matter how many directories in a page is located.