| You can integrate JavaScript pop-up menus with your navigation to give your visitors a list of choices and quick access to various sections of the site. Dreamweaver's Pop-Up Menu script works in both Netscape (versions 4 and up) and Internet Explorer (versions 4 and up), along with other popular current browsers. 1. | In the poses.html document, click the explorations image in the table at the top of the page.
When it is selected, you should see two actions listed in the Behaviors panel from when you created a rollover for this link earlier in this lesson.
| 2. | Delete the text "index.html" from the Link field on the Property Inspector and press Return (Macintosh) or Enter (Windows). Click OK in the alert box that warns you that the JavaScript events will be removed.
There is no longer a link attached to the explorations image, and the behaviors you added previously have been removed.
| | | 3. | Click the explorations image to select it, then click the plus sign (+) button in the Behaviors panel and choose Show Pop-Up Menu from the Actions menu. Click Continue on the Show Pop-up Menu dialog box.
The Show Pop-Up Menu dialog box first appears with a tip to let you know that the Fireworks program can allow you to build more advanced pop-up menus. Click the Continue button to go ahead with creating the pop-up menu in Dreamweaver.
The Show Pop-Up Menu dialog box appears with the Contents tab active. You will use this portion of the dialog box to define the choices to present to your visitor.
 | 4. | In the Text text field, replace the default text New Item by typing Meditations. Click the folder icon next to the Link text field, browse for meditations.html in the explorations folder, and select it. Click Choose (Macintosh) or OK (Windows) to close the dialog box.
The Meditations item is added to the list of menu items.
| | | 5. | Click the Menu plus sign (+) button to add a new item. Replace the default text New Item by typing Sequences. Click the folder icon next to the Link text field, browse for sequences.html, and select it. Add a third item to the list, name it Philosophy, and link it to philosophy.html. Add a fourth item to the list, name it Media, and link it to media.html.
The names of menu items and the corresponding pages to which they link can be edited by selecting an item in the list and using the Text and Link text fields to make changes.
Tip Shorter and more concise menu options help to keep your design clean and easy to use.  Tip To delete an item, select it in the list of menu items and click the Menu minus sign () button. | 6. | Select Sequences in the list of menu items. Click the Move item up arrow button to move the Sequences item to the top of the list. Select Philosophy in the list and click the Move item down arrow button to move it to the bottom of the list.
The order of menu items can be rearranged easily with the menu arrow buttons.
Note You can create subcategories of menu items by selecting the item you want to make a subcategory and clicking the indent item button. Use the Outdent Item button to move an item to a higher category level. | | | 7. | Click the Appearance tab on the Show Pop-Up Menu dialog box. Select Vertical menu from the orientation menu. Select the Verdana font set from the Font menu and enter 10 in the Size text field. There should be no bold or italic styling, and the alignment should be left.
You might need to click back onto the Font menu for the preview area to refresh and show your menu at the size you chose. The preview will also refresh when you specify the colors in the next step.
Here, you are matching the text options for the Pop-Up menu to the styles used in the "Lights of the Coast" project site.
Note If you have fewer than four choices in your menu list, Dreamweaver repeats the last entry until there are four choices in the preview shown in this dialog boxthis is for display purposes only and won't happen in your document. | 8. | Use the color boxes to set the following: Up state Text #666600 (grayish green), Up state Cell #FFFFFF (white), Over state Text #FF9900 (orange), and Over state Cell #FFFFFF (white).
These options enable you to set the look of the pop-up menu to match the style of the navigational images as closely as possible. You can see how the menu will look in the preview area of the Show Pop Up Menu dialog box. The second menu option appears with the Over State colors applied to it; the other menu options appear with the Up State colors. The preview is approximate; it might not appear in a browser exactly as you see it here.
 | | | 9. | Click the Advanced tab on the Show Pop-Up Menu dialog box. Verify that the default settings are as follows: Cell width and Cell height menu choices should be set to Automatic, the Cell padding to 3, the Cell spacing to 0, the Text indent to 0, and the Menu delay to 1000. Make any changes necessary to match the settings listed here. In the Pop-Up borders section, leave the Show borders box unchecked.
The Menu delay controls how long it takes for the menu to disappear after the visitor rolls off of it.
 | | | 10. | Click the Position tab on the Show Pop-Up Menu dialog box. Click the second Menu position button from the left. Type an X value of 5 and a Y value of 26. Make sure that the Hide menu on MouseOut event box is checked. Click OK.
In addition to the X and Y axis, you can use the four general placement buttons on this portion of the Show Pop-Up Menu dialog box to position your menu on the page.
 | 11. | Save the file and preview it in your browser.
|
The Show Pop-Up Menu behavior is now listed in the Behaviors panel. It is split into two portions: Show Pop-Up Menu and Hide Pop-Up Menu. Note An external JavaScript file with the .js extension is created. Usually named mm_menu.js, this file is necessary for the pop-up menu to function. The external file can be rather large, so you need to judge whether the addition of scripts like this one are of a size that your visitors can download quickly and easily.
Test your menus as much as is possible. When you roll over the explorations navigation image, you see the pop-up menu that you created in this exercise appear below the "explorations" graphic. The settings that you applied for appearance and position make the menu look integrated with the rest of the navigation. Note With the Show Pop-Up Menu behavior, there might be some discrepancies between how the menus appear in various browsers on the Macintosh versus Windows. You may need to adjust the positioning of the menu.
|
