TechNote (Archived)

Customizing and troubleshooting Pop-up Menu images

Fireworks 4 introduced a new Pop-up Menu feature which has been improved in Fireworks MX. This feature provides an enormous advantage over previous methods of menu creation. The Pop-up Menu feature eliminates the tedious process of applying many repetitive behaviors in Dreamweaver or hand-coding. The Pop-up Menu feature also allows users to create a hierarchy of submenus that can be customized in many ways.

When using Pop-up Menus with indented submenus, Fireworks generates a GIF file called arrows.gif. This image is the tiny arrow that appears next to a main menu entry. This arrow tells users that a submenu exists.

Note: When using an image for the background of the cells that will contain the Pop-up Menu items, you can choose from several preset styles that are available when the Images radio button is selected. The styles are stored in the Fireworks 4/Configuration/Nav Menu subfolder.

Additional styles can be created and saved in this location using the Styles panel in Fireworks. This allows the user to have infinite design possibilities when creating menus. See Creating custom styles for use in Pop-up Menus (TechNote 15377) for further information. In addition, if desired, an image can be created to replace the background image. This allows for full graphic control of the menus. The arrows.gif can also be replaced with a custom file. The path and names of these files is found in the fwLoadMenus() function. This is located in the Script tag, which is inside the Head tag of the HTML which Fireworks generates:

 function   fwLoadMenus() {if (window.fw_menu_0) return;window.fw_menu_0_1 = new   Menu("Choose One of these:",201,21,"Verdana,    Arial, Helvetica, sans-serif",14,"#000000","#66ffff", "#6699ff","#0000ff");       fw_menu_0_1.addMenuItem("Mark","location='http://www.macromedia.com/support/fireworks'");       fw_menu_0_1.addMenuItem("Julie","location='http://www.macromedia.com/support/dreamweaver'");       fw_menu_0_1.addMenuItem("Karen","location='http://www.macromedia.com/support/director'");       fw_menu_0_1.addMenuItem("Joanne","location='http://www.macromedia.com/support/freehand'");         fw_menu_0_1.bgImageUp="images/fwmenu1_201x21_up.gif";         fw_menu_0_1.bgImageOver="images/fwmenu1_201x21_over.gif";         fw_menu_0_1.fontWeight="bold";         fw_menu_0_1.hideOnMouseOut=true;window.fw_menu_0 = new Menu("root",201,21,"Verdana,    Arial, Helvetica, sans-serif",14,"#000000","#66ffff","#6699ff","#0000ff");     fw_menu_0.addMenuItem(fw_menu_0_1);       fw_menu_0.bgImageUp="images/fwmenu1_201x21_up.gif";       fw_menu_0.bgImageOver="images/fwmenu1_201x21_over.gif";       fw_menu_0.fontWeight="bold";       fw_menu_0.hideOnMouseOut=true;       fw_menu_0.childMenuIcon="images/arrows.gif";    fw_menu_0.writeMenus();   }

The code example above provides the following information:

	Text of the main Pop-up Menu:	"Choose One of these:"
	Size of the submenu's table cells:	201,21
	The fonts used for the HTML text of the submenu:	"Verdana, Arial, Helvetica, sans-serif"
	The font size for the submenu:	14
	Colors of the Up state text and background in the submenu:	"#000000","#66ffff",
	Colors of the Over state text and background in the submenu:	"#6699ff","#0000ff"
	Submenu text:	ex:"Mark"
	Submenu URL links:	"location='http://... (need not be absolute URL's)
	Location and name of the background image files for the Up and Over states for the submenus:	"images/fwmenu1_201x21_up.gif" "images/fwmenu1_201x21_over.gif"
	Text style for the submenus:	"bold"
	Main Pop-up Menu cell size:	201,21
	Main Pop-up Menu fonts:	"Verdana, Arial, Helvetica, sans-serif"
	Main Pop-up Menu font size:	14
	Colors of the Up state text and background in the main menu:	"#000000","#66ffff"
	Colors of the Over state text and background in the main menu:	"#6699ff","#0000ff"
	Location and name of the images for the Up and Over states for the main menu:	"images/fwmenu1_201x21_up.gif" "images/fwmenu1_201x21_over.gif"
	Text style for the main menu:	"bold"
	Location and name of the arrow.gif that appears in the main menu:	"images/arrows.gif"

Note: For information about the Fireworks MX mmLoadMenus function, please refer to Customizing Fireworks MX pop-up menus (TechNote 16423).

In this example there is only one main menu entry and several submenus. If there are submenus of the submenus, then the arrow.gif would appear as one of the entries under the submenu as well. Notice that the submenu data is entered first(fw_menu_0_1) and the main menu is at the bottom of the function (fw_menu_0). All of the above properties can be altered to change the appearance of the Pop-up Menus in the HTML file. Fireworks MX uses a different naming convention for naming menus, enabling multiple Pop-up Menu HTML files to be inserted into a single Dreamweaver HTML.

Troubleshooting the failure of images to appear when the page is viewed in a browser

For Pop-up Menus with submenus, a broken image icon may appear in the place of the small arrow pointing to a submenu. Or, Pop-up Menus which have an image in the table cell display only the table cell color. Listed below are some of the most common reasons:

Check the location of the Fireworks HTML document. If the HTML page is moved, Dreamweaver does not parse thefwLoadMenus as its own native behavior. This means the links in this function will not be reconciled when the HTML is placed in a Dreamweaver HTML file that is not in the same directory as the originally exported Fireworks HTML.
When the HTML is pasted from the clipboard, the links will appear as absolute from the hard drive because Dreamweaver will not recognize the fwLoadMenus function. Pasting from the clipboard is not recommended, because the links will be broken.
If the images linked in the fwLoadMenus function are moved to a folder other than that to which they were originally exported.
If the images linked in the fwLoadMenus function are not uploaded to the server. Dependent files must be uploaded so that they remain linked.

Note: Unless customized, no matter how many submenus are used in a page, Fireworks always uses the same arrows.gif image file.

Additional Information

For instructions on how to create Pop-up Menus, please see:
Fireworks 4: How to create Pop-up Menus. Choose Help > Lessons and choose Lesson #5

For procedures to follow when troubleshooting Pop-up Menus see:
Troubleshooting Pop-up Menus from Fireworks (TechNote 18538)

The following TechNotes discuss various aspects of Pop-up Menus and ways you can customize or use them in your HTML:
How to set the length of time a Pop-up Menu remains visible (TechNote 15007)
Changing the location of a Pop-up Menu exported from Fireworks(TechNote 15001)
Customizing and troubleshooting Pop-up Menu images (this TechNote)
Multiple Pop-up Menu HTMLs inserted into one Dreamweaver file (TechNote 15573)
Fonts in Pop-up Menus (TechNote 15342)
Pop-up Menus appear behind active content (TechNote 15842)
How to set the length of time a Pop-up Menu remains visible (TechNote 15007)
How to open Pop-up Menus in another frame panel (TechNote 15816)
Using anchor tags with Fireworks 4 Pop-Up Menus (TechNote 15161)
Assigning additional behaviors to Pop-up Menu items (TechNote 15369)
Fireworks Pop-up Menus in Dreamweaver Library files (TechNote 15101)
Creating custom styles for use in Pop-up Menus (TechNote 15377)
Fireworks 4 Pop-up Menus in Dreamweaver 4 templates (TechNote 15088)
Preventing the Pop-up Menus from disappearing too soon after mouseover (TechNote 16052)
How to create transparent Pop-up Menus (TechNote 15526)
How to retain the button over state while scrolling over a Pop-up Menu (TechNote 15926)
Using site root-relative paths with Fireworks Pop-up Menus in Dreamweaver templates (TechNote 15832)
Using site root-relative paths with Fireworks Pop-up Menus in Dreamweaver Library files (TechNote 15899)
The commented fw_menu.js file (TechNote 15827)

For information specific to Fireworks MX Pop-up Menus, see:
Customizing Fireworks MX pop-up menus (TechNote 16423)
How to retain the over state for Pop-up Menu triggers in Fireworks MX (TechNote 16565)
How to make Pop-up Menus from Fireworks MX appear in a different frame (TechNote 16648)

Note: aspects of the Pop-up Menu feature in Fireworks were improved in the Fireworks 4.0.2 Updater. See Fireworks 4 and 4.0.2 release notes for specific information about the updater.