How to change the location of submenus in a Fireworks Pop-up Menu

Last updated on May 16, 2021 07:54:52 AM GMT

Positioning submenus in Fireworks 4

Many users have asked how they can control the position of submenus that are generated using the Fireworks 4 Pop-up Menu feature. The code that controls the horizontal and vertical position of the submenus relative to their main menu items is found in the fw_menu.js file. This TechNote will explain how you can change the position of your submenus using the code provided. In Fireworks MX, submenus can be positioned using the Position tab of the Pop-up Menu Editor. See Fireworks MX Pop-Up Menus (Fireworks Article) for more information on Pop-up Menus in Fireworks MX.

This TechNote assumes that you already know how to create Pop-up Menus in Fireworks 4 and that you know how to export Fireworks HTML and Images to a defined Dreamweaver site directory structure. You can learn how to create Pop-up Menus by choosing Help > Lessons and clicking on Lesson 5 in the Flash movie that appears: "Creating a Pop-up Menu" to learn how to create Pop-up Menus. Also you should be somewhat familiar with JavaScript, and should be able to edit the code in the fw_menu.js file with confidence.

This TechNote will explain:

How to set the horizontal positioning of the submenus globally.
How to set the vertical positioning of the submenus globally.
How to set individual horizontal positioning for submenus.

Changing submenu horizontal position globally

The submenu positioning in the fw_menu.js is determined by three lines in the code. In each case, the change you make should be identical. The following table gives details on these three lines of code and shows how they should be changed. To do this you can open the fw_menu.js that was exported to your site directly alongside the Fireworks HTML in Code view in Dreamweaver 4.

Note: The code in the fw_menu.js shown in this TechNote is generated from Fireworks 4.0.2 in it's original form. Make sure you have downloaded and installed the Fireworks 4.0.2 updater before exporting your HTML and images from Fireworks. If you have made other third party recommended changes, your line numbers may be different.

To change the horizontal position of submenus, follow these steps:

Open the fw_menu.js file that Fireworks exported alongside the Fireworks HTML file in Dreamweaver and choose View > Code if Code View is not enabled. You should also be able to see the line numbers. If not, choose View > Code View Options > Line Numbers. It may also help to turn on Word Wrap, Syntax Coloring and Auto Indent as well.

Scroll down in the code to line 652 and locate the following line of code:

Notice the "-5" at the end of that line? That means the submenu should overlap its parent menu by 5 pixels. So if you wanted increase the overlap, change the -5 to something smaller like -10. That would cause an overlap of 10 pixels. If didn't want to overlap at all, you would add a positive number. For example, changing the -5 to +5 would cause the submenu to be positioned 5 pixels to the right of the parent menu's right side. Change this number to the desired pixel setting.
Because the Pop-up Menu code is designed to work in several different browsers, there are two other locations where you must set the distance from the right side of the main menu.

Scroll down in the code to line 668 and locate the following code:

Again, change the "-5" at the end of this line of code to the desired pixel setting to cause the submenu to appear the desired number of pixels from the right side of the main menu.
The third location where you must change the horizontal position of the submenu is shown below. It is only 3 lines further down on line 671.

Here also, you will need to change the "-5" at the end of the line to the same number you entered for the two submenu positions in lines 652 and 668. Once you have set this number in all three lines, Save the fw_menu.js file. The next time you view the HTML in a browser, you will see that the submenus appear at exactly the location you specified in the three lines of the fw_menu.js code.

Changing the vertical position globally

As with the horizontal position, the vertical position of the submenus is set in three lines of the fw_menu.js file. The following table gives details on these three lines of code and shows how they should be changed. Again you must open the fw_menu.js that was exported to your site directly alongside the Fireworks HTML in Code view in Dreamweaver 4.

To change the vertical position of submenus follow these steps:

Again, as in step 1 in the instructions for horizontal positioning of the submenus, you must open the fw_menu.js in Dreamweaver in Code View.

Scroll down to line 647 and locate the following code:

Notice that the last item in the line is divided by the number "3". The default location for submenus is set to 1/3 the height of the menu item as set in the fwLoadMenus function in the <script> area of the HTML code. By either changing the number 3 to a different number, or by replacing the entirel.Menu.menuItemHeight/3 to a different numerical value, positive or negative, the vertical position of the submenus can be adjusted.
Scroll down to line 667 and locate the following code:

Again the value is expressed as the MenuItemHeight divided by "3". You can either set the value of the denominator in this fraction or you can replace the entire l.Menu.menuItemHeight/3 with the desired value, including negative numbers.
Scroll to line 670 which is the last line where the vertical position must be set:

Again the value is expressed as the MenuItemHeight divided by "3". You can either set the value of the denominator in this fraction or you can replace the entire l.Menu.menuItemHeight/3 with the desired value, including negative numbers. All values should be set in whole numbers since they are measured in pixels.

Changing the horizontal position for individual menus

In the fw_menu.js file, append the string "+ (childMenu.Menu.horzOffset || 0)" to the default endings to lines 649, 652, 668 and 670 as shown below:

Note: Notice the "+" must be included before(childMenu.Menu.horzOffset...)

Make sure you correctly enter the entire string!
The Fireworks JavaScript code also sets a container for the menus and submenus to appear in as indicated by the property "Menu.container", which in turn has a property called "clip". The Menu container is an invisible box that the Pop-up Menus and submenus are set to appear in and the clip delimits the size and location of this container. This container only affects Netscape 4.x code, so if you want to make submenus that are positioned to the left of the main menu appear in Netscape 4.x you'll need to add the following two lines of code after line 652 in the fw_menu.js file:

if( l.Menu.container.clip.left > childMenu.left ) { l.Menu.container.clip.left = childMenu.left;
In the submenu sections of the fwLoadMenus function, for each submenu you wish to control the horizontal position, define horzOffset. See lines 14 and 20 in the example below. Positive values shift the submenu to the right, and negative values shift the submenu to the left. If you don't define horzOffset for a submenu, it simply goes to the default location.
Save and close the fw_menu.js and the HTML file. Test your HTML in a browser.

Additional Information

The following TechNotes discuss various aspects of Pop-up Menus and ways you can customize or use them in your HTML:

Changing the location of a Pop-up Menu exported from Fireworks (TechNote 15001)

Customizing and troubleshooting Pop-up Menu images (TechNote 14995)

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)