Inserting Dreamweaver Pop-Up Menus

Inserting Dreamweaver Pop-Up Menus

If you don't own Fireworks, all is not lost. You can still use Dreamweaver to insert a pop-up menu.

Pop-up menus are popular because they save space on the page and create a cleaner layout. The main site sections are shown with global navigation, but the subsection links don't appear until the mouse is over the main heading.

On HomeCook. info , the main site categories of food, wine, recipes, etc., have related subsection pages. In the wine area, for example, there might be pages for red, white, and ros wines, or domestic, imported, or regional wines, cooking wines, dessert wineswhew, you get the idea. If every possible link for the wine area was listed in the main menu, you'd have a messy and hard-to-use site. Multiply that by the links for food, recipes, news and the menu grows overwhelming. A pop-up menu is one way to solve that problem.

This behavior attaches to links, so have the global site navigation completed before you start adding subsection links.

To create a pop-up menu:

1.	Select the relevant link for the pop-up menu.
2.	In the Behaviors panel, click the plus and select Show Pop-Up Menu.
3.	Dreamweaver tells you that pop-up menus work better when made with Fireworks. Click Continue, and the Show Pop-Up Menu dialog appears ( Figure 12.27 ). Figure 12.27. Use the Contents tab of the Show Pop-Up Menu dialog to define your menu choices.
4.	Select the Contents tab. Three sets of icons follow the Menu option. The plus and minus buttons are the familiar icons to add or delete a menu item. The outdent and indent icons are used to create indented submenu items. Click the indent icon to begin a submenu and click the outdent icon when the submenu is complete. Use the familiar up and down arrows as needed to reorder the items in the menu list. Text: Type the text for the menu item in this field. Target: Select one, if needed. If you do nothing here, the link opens in the same window. If you're using frames , put the name of a frame here. Link: Type or browse to insert the URL in this field. Click the plus button next to the word "Menu" to add another item to your list, and repeat as needed.
5.	Select the Appearance tab ( Figure 12.28 ). Figure 12.28. Use the Appearance tab to define your menu orientation and colors. Select Vertical menu or Horizontal menu for the menu layout from the pop-up menu. Specify a Font. Specify a font Size . Select the icons for Bold, Italic, Left Aligned, Centered, or Right Aligned as needed. Use the Color Picker to select Text and Cell colors for the Up state and the Over state. Check your choices with the miniature version of the menu.
6.	Select the Advanced tab ( Figure 12.29 ) if you need more precise layout. Figure 12.29. Use the Advanced tab to define the menu's table cells . Enter Cell width in pixels or let the cells size themselves automatically depending on the contents. Enter Cell height in pixels or opt for automatic sizing. Enter Cell padding as desired. Enter Text indent as desired. Enter Cell spacing as desired. Enter a value in milliseconds for Menu delay. This is the delay between when the user mouses over the link and when the pop-up menu appears. One second equals 1000 milliseconds . In the Pop-Up borders area, indicate whether to Show borders. If you choose to show a border, then complete the remaining questions with a Border width and color choices for the borders. Check your choices with the miniature version of the menu.
7.	Select the Position tab ( Figure 12.30 ) to choose where the menu appears on the page. Figure 12.30. Use the Position tab to define the position of the pop-up. Select a Menu position for the pop-up menu from the preset options. Customize the preset menu position with values entered in the X (horizontal) and Y (vertical) coordinate fields. The custom coordinates count starts from the top-left corner of the menu. Be sure "Hide menu on onMouseOut event" is selected unless you want the pop-ups to continue to display after the user leaves that menu.
8.	Click OK to accept your changes.
9.	Preview the file in your browser ( Figure 12.31 ). If needed, make changes by double-clicking the Show Pop-Up Menu behavior in the Behaviors panel ( Figure 12.32 ). Figure 12.31. A pop-up menu has to be previewed in a browser. You can't test it in the Dreamweaver document window. Figure 12.32. Be sure the behavior to Hide Pop-Up Menu gets added; otherwise , the menu just won't go away!
10.	To add a pop-up menu for another of your global navigation links, select the appropriate link and repeat these steps.

Tips

• The JavaScript needed for a pop-up menu is so extensive , Dreamweaver saves it as an external file with a .js extension. You should see mm_menu.js in your site files. Remember, mm_menu.js needs to be uploaded to the server when you are transferring your files to the server or your menu won't work.

• Be sure to test the appearance of pop-up menus in several different browsers and with as many operating systems as possible. There may be some variation in the way the menu displays in different situations. You'll probably want to do some fine-tuning and tweaking of parameters.