Holtenwood Computing Logo

*** October 14, 2003 New Version 4.0f ***
Now works with khtml based browsers (Mac OSX Safari, Konqueror)

*** May 10, 2003 New Version 4.0e ***
Now works for NetScape 7
Netscape 4.x "1 pixel" (NS 4.x bug) adjusted for
IE scrolling and clientTop problem fixed

Test pop-up menu offset vertically by paragraphs and offset horizontally by a pixel shim.

Test pop-up menu inserted into centre table cell with variable sizes (adjusts to screen resolution). This pop-up also contains sub-menus.

 
 

The above pop-up menus which move relative to the button location are done through a modification of the standard Macromedia Fireworks 4 pop-up menus. The pop-up menus which come standard with Fireworks 4 are positioned absolute to the screen. To create menus which instead hold position relative to the triggering image, you must make the following modifications.

These modifications only make the FW menus position themselves relative to the triggering object. They do not fix the other problems with pop-up menus in Fireworks version 4.0.2 and Dreamweaver 4. Please see the bottom of this page for a list of the remaining problems (that I know of).

**** !!! Warning !!! There seems to be a problem with Dreamweaver Rollover behaviour (MM_swapImage) and this version of pop-ups. Problem occurs in NS 4.x only and may not always occur. Please look at the complete note at the bottom of this page if this may apply to you.

  1. Copy the fw_menu.js file from the following location into the folder where you are creating the Fireworks pop-up menu. Location: http://www.holtenwood.bc.ca/computing/popup/fw_menu.js .

  2. Create the triggering image and the pop-up menu using Fireworks 4. Export as html.

  3. Use the Dreamweaver Insert Fireworks HTML to insert the pop-up menu in the desired location.

  4. Modify the inserted onMouseOver event directly as follows:

Dreamweaver and Fireworks extensions to automate this process are not yet available. With my current workload, I am not sure when I will get to it...

Note: It is assumed throughout the above you are using Macromedia Fireworks 4 and Dreamweaver 4. However, by viewing and analysing the source for this page you could do the same pop-up menus directly without FW and DW. You are welcome to do so as long as the copyright and modification notices are left in the fw_menu.js file.

This version of pop-up menus only causes them to move relative to the trigger location. The following problems with pop-up menus in the original version of Fireworks 4.0.2 still remain in this version. If any of these problems are unacceptable, there are other ways of doing pop-up menus. Al Sparber and the Project*VII team has a tutorial for doing pop-up menus directly in Dreamweaver 4 without using Fireworks at http://www.projectseven.com/dreamweaver/newdrop/. They also have a design pack called "Jazz" with flyout/pop-up menus available for sale at: http://www.projectseven.com/dpdemos/jazz/index.htm

Problems with FW pop-up menus which still exist:

  1. Difficult to use as DW library items. See Dreamweaver Technote http://www.macromedia.com/go/15101 for a full description of how to do it. You may find even following the instructions in this technote the library items do not work in complex multilevel directory sites.

  2. Dreamweaver does not recognize the fw_menu.js script as a DW object. Therefore it does not change the link to this script when you import the FW HTML into DW. This forces you to manually change the script link, place a copy of fw_menu.js in each individual subdirectory, or keep your site structure as "flat" (every page containing a pop-up menu in the root directory).

  3. They do not work in Opera 5.

  4. The fw_menu.js file is overlarge (25KB). On slow connections it can slow down the load of the first window with pop-up menus significantly. For example this page you are looking at took almost four times as long to download as it would have without pop-ups. And it is not like images which can continue loading after the rest of the page is already up. The page will not work at all until the entire fw_menu.js file is down on the browsing PC.

Problem with Dreamweaver rollover behaviours this version of pop-up menus in NS 4.x browsers:

A problem has been found when using Dreamweaver Rollover behaviours in combination with my version of pop-up menus on the same root image. Problem only occurs in NS 4.x series browsers. I have not found a solution yet.

Several people have now reported they successfully combined rollover behaviours with my version of fw_menu.js fine. But others are having problems. I have not identified the difference between those that work and those that do not.

So you might as well give it a try. It may work for you. If it does, let me know and if possible send me a URL. I can then compare some working combinations of "MM_swapImage" and "FW_showMenu" with some that do not work to see what the difference is.

Note: The exact same behaviour also comes from not changing the new "imgname" parameter in the FW_showMenu call to the real image name as per the instructions above. So please check this first if you are having problems in NS 4.x only.

Timothy Atwood
Holtenwood Computing
http://www.holtenwood.bc.ca/computing/