TechNote (Archived)

Creating custom styles for use in Pop-up Menus

Pop-up Menus have become one of the most popular features of Fireworks. Using the Set Pop-up Menu wizard, users can quickly create multilevel navigational systems. Pop-up Menus can be modified or manipulated (to some extent), as evidenced by the many suggestions and ideas in the TechNotes listed in Additional information below.

Choosing the background in Pop-up Menu items
In creating Pop-up Menus in Fireworks, you have two basic options to influence how the background looks behind the text.Pop-up Menu items, by the way, are structured within an HTML table. Each item in the menu is a table cell. You can choose to populate the table cell with a background color or cover the background color with an image. With either choice, the text appears in front.

Using Table cell background color
If you select HTML in the Cells section of the Set Pop-up Menus you will designate only the table cell's background color in the menu items. See Example 1 for a Pop-up Menu which uses table cell color as the Up State and Over State background behind the menu text.

Using Image in the background of the menu item
Your other option for the background appearance in each menu item is an image. To make this choice, select Image in the Cells section of the Set Pop-up Menu wizard. After choosing the Image option, you select the Cell color for both the Up State and the Over State. Then, you'll see a set of Styles on the wizard to choose from. The default set of Styles in Fireworks act like a grayscale overlay (similar to the Luminosity blending mode on the Layers panel). Many have shading which gives a 3-dimensional effect to the Cell color, as illustrated in Example 2. In Example 3 , you'll see a Pop-up Menu which uses some of the styles available in the default set on the Set Pop-up Menu wizard.

Adding your own personal styles to the Pop-up Menu wizard
To further customize your Pop-up Menu choices, you can add your own personal styles to those available on the Set Pop-up Menu wizard, as follows:

1	Use the Rectangle tool to draw a square. Select it.
2	Select a stroke, fill, texture and/or effect. Different combinations will work differently as a style in the Pop-up Menu wizard (this is discussed in greater detail in the Styles choices section below).
3	Choose Windows > Styles if the Styles panel is not already open.
4	With the rectangle still selected, select New Style in the Styles panel options pop-up menu. (Activate the options pop-up menu by clicking the pop-up triangle at the top right of the Styles panel.)
5	In the New Style dialog box, name the style and click OK.
6	The new style will now appear in the Styles panel.
7	Click the new style in the Styles panel.
8	Select Export Styles in the Styles panel options menu (see Example 4).
9	In the navigation box on the Save As dialog box, browse to find the Nav Menu folder in Fireworks' Configuration folder.
10	Save the new style into the Nav Menu folder.
11	Once the style has been exported you can access it in the Set Pop-up Menu wizard. Example 5 displays the wizard with an added Style. Note: You do not have to Exit Fireworks to reload the new Pop-up Menu styles. They are automatically added when the Set Pop-up Menu wizard is set to Image mode.

Style choices
As mentioned above, a style can have fill, stroke, texture and effects.Stroke and fill features in styles are vector properties so they will adjust in length and height and can be used for any size menu item.

Using different combinations of these settings will produce a myriad of interesting choices for Pop-up Menus. You'll want to experiment with the different combinations to get a feel for what to expect when the style is actually applied to the menu item. In the meantime, here are some guidelines and suggestions to help you anticipate results:

	Fill Solid A solid fill in a style renders as a grayscale icon in the Set Pop-up Menu wizard.No matter what solid color you used in the style, your Cell color will control the coloring in the Pop-up menu item. Texture On the Fill panel, you can add a texture and set the percentage that the texture will affect the object's fill. Selecting the Transparent option will not affect how the Pop-up Menu wizard renders the textured fill. See Example 6 to see an added style based only on a solid fill and a texture set to 100%. Pattern, Web Dither and Gradient Styles can have a pattern fill, too. The pattern fill will determine the background image;including the colors of the pattern fill. Cell color will not affect the appearance of a menu item using a style with a pattern, web dither or gradient fill (as evidenced by Example 7).
	Stroke The Pop-up Menu wizard uses the stroke types and colors in the menu items. If the stroke extends outside of the path, only the part of the stroke which is inside the path will appear in the menu item (although the entire stroke will appear in the wizard). To judge how a stroke will render in a menu item, you can designate that the stroke appear only inside the path on the Object panel.
	Effect Effects, such as Inner Bevel, can also be saved in a style. This particular effect will add luminous shading to the Cell color choice (which determines the coloring of solid fill in the menu item). Effects, such as Inner Glow, will add color in addition to the Cell color choice. See Example 8.
	Texture Texture, created from grayscale bitmaps, can affect the appearance of any type of fill or stroke. They will tile (like patterns) if the size of the menu item is large enough. External files can also be used as textures (as well as patterns), as explained in the Applying Colors, Strokes, and Fills chapter of the Using Fireworks manual.

Using a custom-designed graphic for a pattern or texture
Some users may want to create a custom-designed pattern or texture to use as a style in the Set Pop-up Menu wizard. Creating a graphic so that it will tile seamlessly as a pattern or texture can be a fairly complicated process. See How to create seamlessly tiling graphics in Fireworks (TechNote 13834) for step-by-step instructions. (This TechNote was not written with Pop-up Menus in mind, so additional adjustments to the placement of the image pieces may still be necessary to make the pattern tile seamlessly in the a Pop-up Menu item.)

Some users may even want to save an image as a pattern in the expectation that the image will not appear to tile. (It will, in fact, tile because the upper left corner of the image used as a pattern will be positioned in the middle of the image filling the table cell. However, if you have cut up your image and reassembled it as described in TechNote 13834 then it may not appear to tile in the Pop Up Menu item.) Assuming that you have been able to create the graphic so that it will appear "whole" in the Pop-up Menu items, be aware that you may still need to hand-edit the source code in the ultimate HTML document to accommodate the size of your whole-appearing image.

Note that the width and height of the menu item is based solely on the text used and not on the design and content of the custom style. And, the size will be determined by the menu item with the most text. If the text in the menu item causes the table cell to be larger than original whole-appearing image, then the tiling will still be apparent. Similarly, if your text is shorter than the whole-appearing image is wide, then Fireworks will not extend the menu item to include the whole-appearing image.

You can alter the width of the table cell holding the image in the fwLoadMenus function in the<script>tag inside the<head>region of the HTML file into which the Fireworks JavaScript has been inserted. SeeCustomizing and troubleshooting Pop-up Menu images (TechNote 14995) for more information on how to adjust the width of your Pop-up Menu items.

Note:TechNote 14995 also explains where the background images are located and how they are named. Another possibility for controlling the background image in the table cell is to replace the image (keeping the same name) or hand-edit the path to an image with a different name in the HTML document controlling the Pop-up Menus. To avoid tiling or the cutting off the new image in the table cell, you'll need to make sure your new image has the same height and width dimensions as those of the image produced by the Pop-up Menu wizard.

Additional information
You'll find more information about Pop-up Menus in the following TechNotes:

	Customizing and troubleshooting Pop-up Menu images (TechNote 14995)
	How to set the length of time a pop-up remains visible (TechNote 15007)
	Fireworks 4 Pop-up Menus in Dreamweaver 4 templates (TechNote 15088)
	Fireworks Pop-up Menus in Dreamweaver Library files (TechNote 15101)
	Using anchor tags with Fireworks 4 Pop-up Menus (TechNote 15161)
	Assigning behaviors to Pop-up Menu items (TechNote 15369)
	Fonts in Pop-up Menus (TechNote 15342)

Note: aspects of Fireworks features were improved in theFireworks 4.0.2 Updater. See Fireworks 4 and 4.0.2 release notes for specific information about the updater.