Creating Pop-Up Menus (drop menus) in Fireworks

Here's what you need to do to create drop-menus for your Dreamweaver template.

Step 1. Open your .png template in Fireworks and 'show' all the slices by selecting 'layers > web layer'. All your slices will be highlighted in light green.

Step 2. Select the navigation button you wish to add a drop-menu to. This will now have a green border around the button.

Step 3. From the top menu choose 'Insert > Pop-Up menu. The Pop-up menu wizard will appear.

Step 4. In the text field, enter the name of your first menu item.

In the example above, we have entered 'product 1'. You can also add the link of the text in the link field. Click the + button above to enter this first drop-menu item in your list.

Step 5. Repeat the same steps for adding further menu items. We have added 4 more.

Step 6. Click 'next' to continue.  In the next Pop-Up screen, you can customize the appearance and colors of your drop-menu.  By default the colors should already be generated if you have a pop-up menu elsewhere on the template.  If not, you will have to define the 'upstate' and 'overstate' colors.  Stick to the colors of the template.

Step 7. Click 'Finish' to complete the wizard and create the menu for you.

If the drop-menus seem out of alignment beneath the navigation buttons, you can click on the menu to drag it until you feel that it is correctly aligned.  This should be done with 'web layers' selected.

Step 8. Preview the .png template in I.E. from Fireworks, by choosing 'file > preview in browser'.

Once you preview the menu in the browser (from Fireworks) in IE (click View /Source).....scroll up till you find the function 'fwLoadMenus' - copy the code from there to the same code found in the Dreamweaver template.  Don't export the entire layout, only preview the code in the browser and cut and paste the code to the Dreamweaver template.

Alternatively, try to figure out the following code for the below navigation:

Navigation


Products >
Product 1
Product 2
Product 3
Product 4
Product 5


function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",81,17,"Verdana, Arial, Helvetica, sans-serif",10,"#ffffff","#00309c","#639ace","#f7f7e7");
fw_menu_0.addMenuItem("About Us");
fw_menu_0.addMenuItem("Our Team");
fw_menu_0.addMenuItem("Our Vision");
fw_menu_0.hideOnMouseOut=true;
window.fw_menu_1 = new Menu("root",84,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#003399","#6699cc","#ffffff");
fw_menu_1.addMenuItem("Product 1");
fw_menu_1.addMenuItem("Product 2");
fw_menu_1.addMenuItem("Product 3");
fw_menu_1.addMenuItem("Product 4");
fw_menu_1.addMenuItem("Product 5");
fw_menu_1.hideOnMouseOut=true;
window.fw_menu_2 = new Menu("root",104,17,"Verdana, Arial, Helvetica, sans-serif",10,"#ffffff","#00309c","#639ace","#ffffff");
fw_menu_2.addMenuItem("Training");
fw_menu_2.addMenuItem("Consulting");
fw_menu_2.addMenuItem("Other Services");
fw_menu_2.hideOnMouseOut=true;

fw_menu_2.writeMenus();
} // fwLoadMenus()

//-->
</script>


We just made a sample drop down menu for template 20 and got the code from previewing it in the browser (from Fireworks).

Step 9. The final and trickiest bit!  You need to scroll down to the 'mouseover' code, of the button with drop-menu you just created.  In our example it is:

onMouseOver="window.FW_showMenu(window.fw_menu_1,130,97)

Note the variables '1,130,97'. The first variable '1' represents the menu, in this example it is the second menu (first one is always 0). The second variable '130' represents the distance to the drop-menu from the left-margin. '97' represents the distance to the drop-menu from the top-margin.

It is the second variable '130' or whatever it is for that particular button that you need to alter if the drop-menu is not aligned correctly in the .dwt template. Try increasing or decreasing this number to align the menu correctly, e.g. you can increase the variable to 140 or decrease to 120.

Copy and paste to replace the existing mouseover code in the .dwt template in Dreamweaver.  A good way to do this is to select the navigation button in the .dwt template and then switch to code view.  You will see that the code for the navigation button is highlighted, replace the 'mouseover' code just before this.

In the .dwt template the final mouseover code for the navigation button would look like:

</a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="window.FW_showMenu(window.fw_menu_1,130,97);MM_swapImage('products','','../images/products_f2.gif',1)" ><img name="products" src="../images/products.gif" width="90" height="22" border="0"></a>

Remember, all you need to do is copy paste the code to the Dreamweaver template.  Don't export the entire template.  Find the same function in the Dreamweaver template and replace it with the above codes.

Click here to learn how to create sub-menus (cascades) in Fireworks...