Creating Pop-Up Menus (drop menus) in FireworksHere'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.
fw_menu_2.writeMenus(); //-->
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. 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... |