- JavaScript Concepts
- Open Window
- Change Property
- Creating a Cascading Menu
- Creating Fancy Rollovers
- Cookies and Code Snippet
- Debugging Your JavaScript
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Cascading Menu
A behavior that's new to Dreamweaver in MX is the Show Pop-Up Menu behavior. As the name suggests, this behavior produces a menu when users mouse over an image (Figure 13.17).
)
Figure
13.17 The menu pops up when you mouse over the image.
You can create the menu in Dreamweaver, or if you have the full Macromedia Studio MX package, you can create the menu in Fireworks, and export it for use in Dreamweaver.
To create a pop-up menu in Dreamweaver:
Create a new HTML page.
Add an image to the page. This image will serve as the trigger area for the pop-up menu.
Save the file.
The Show Pop-Up Menu behavior requires that you save the file before you add the behavior.
Select the image. In the Behaviors panel, click the + (plus) button and select Show Pop-Up Menu from the drop-down menu. The Show Pop-up Menu dialog box will appear (Figure 13.18).
Figure
13.18 The Show Pop-Up menu dialog box is a dense one.In the Text text box, type the, uh, text you want to appear in the first menu item.
In the Link file box, type the URL of the file you want to go to when the user selects that menu item.
Click the + (plus) button to add the item to the list and prepare to enter a new item.
Repeat Steps 5 through 7 for each menu item you want to appear in the pop-up menu.
If you want an element to be a submenu selection of the menu (Figure 13.19), click the indent menu item button
Figure
13.19 You can make the menu cascading by indenting elements...
The items you indent will be a submenu (Figure 13.20).
Figure
13.20 ...which then pop out even further from their parent item.When you have added all the items you want the menu to contain, click the Appearance tab of the dialog box. (Figure 13.21)
Figure
13.21 The Appearance tab allows you to preview and adjust how your menu
will look.From the first drop-down menu, choose Horizontal Menu or Vertical Menu.
From the next group of menus, specify the look of the text of your menu (Figure 13.22).
Figure
13.22 You have all the normal font controls.Specify the colors for the up state and the down state of the menu.
The up state is what the menu item looks like when the user is not mousing over it. The down state is what the menu looks like when the mouse is over it.
Click the Position tab in the dialog box (Figure 13.23).
Figure
13.23 The position tab allows you to set where the menu pops out.
(We've cropped the Position tab of the Show Pop-Up Menu dialog box here.)Click whichever of the position buttons corresponds to the location in which you want your menu to appear relative to the image.
If you want the menu to stay up even if the user moves the mouse away, uncheck the Hide Menu on onMouseOut event (this is not recommended—it can make the other elements of your page impossible to read or navigate through).
Click OK to close the dialog box.
)
Figure
13.18 )
Figure
13.19 )
Figure
13.20 )
Figure
13.21 )
Figure
13.22 )
Figure
13.23Using the Show Pop-Up Menu behavior creates a file called mm_menu.js in the same folder as your HTML file. You need to make sure that that file gets uploaded to your testing server and/or production server (if you've specified one) along with the HTML file, if you want your pop-up menu to work. If your pop-up menu doesn't work on your live site, most likely you haven't uploaded this file.
You can now preview your pop-up menu (Figure 13.24).
)
Figure
13.24 Don't overuse these!
If you have Fireworks, you can also create a pop-up menu in that program and then export it for use in Dreamweaver. Using Fireworks has the advantage that you can use images instead of text for the menu.
To create a graphical pop-up menu using Fireworks:
In Fireworks, create or open the graphic that will serve as the hotspot for your menu. (Figure 13.25).
Figure
13.25 Create the hotspot graphic first. Crop the image so that your graphic takes up the whole area (Figure 13.26).
Figure
13.26 Crop the image, or confusing HTML will result.
This step is not strictly necessary, but makes the HTML easier to handle later.
Select the slice tool entire image.
From the menu bar, choose Modify > Pop-up Menu, then select Add Pop-up Menu from the submenu that appears. The Pop-up Menu Editor dialog box will appear (Figure 13.27).
Figure
13.27 The Pop-up Menu Editor in Fireworks is similar but not identical to
Dreamweaver's Pop-Up Menu dialog box-capitalization issues aside. Enter the Text and Link location for each of your menu items in the list box.
Click the Next button to move to the Appearance tab in the dialog box (Figure 13.28).
Figure
13.28 Here you can select an image-based pop-up menu.Click the Image radio button. This will switch the display to show image possibilities (Figure 13.29).
Figure
13.29 Pretty pictures! You can choose lots of different backgrounds and
styles for your menu buttons. From the drop-down menu at the top of the dialog box, select Vertical Menu or Horizontal Menu.
Specify the font, style, size, and alignment you want for the text in the menu.
Using the color pickers, select the color you want for your menu text and menu image when in the up (unselected) state.
Select the pattern, if any, you want for your menu buttons (Figure 13.30).
Figure 13.30 The default styles are, in general, chosen for their readability.Repeat Steps 10 and 11 for the Down, or selected/moused-over state.
Click Done.
The image will now appear in Fireworks with some obscure symbols, indicating that the image, when saved as an HTML file, contains a pop-up menu (Figure 13.31).
Figure
13.31 The weird curved lines indicate that the image triggers a pop-up
menu.From the Fireworks menu bar, select File > Export to export the HTML file and images to Dreamweaver. (You can also choose other export settings here.)
Choose the location to save your file. You can also opt to save your images in a subfolder, which is a pretty good idea, because they can clutter things up pretty quickly.
Click OK to finish the export.
In Dreamweaver, open the HTML file you just created.
)
Figure
13.25 )
Figure
13.26 )
Figure
13.27 )
Figure
13.28)
Figure
13.29)
Figure 13.30)
Figure
13.31 You can now preview your menu in your browser, or you can copy and paste the HTML into another file. If you do the latter, make sure to copy the JavaScript references above the body as well.
Tips
In the Pop-up Menu Editor dialog box in Fireworks, you can move an item up or down by selecting it and using the Up and Down arrow buttons to move it through the list. You can add items either by using the + (plus) button or by pressing Tab after an existing item.
You can add table formatting to your menu items by clicking on the Advanced tab of the Pop-up Menu Editor dialog box in Fireworks. These options are the same as those used to format regular HTML tables.
You can also add a delay, hover-activated borders, and shadows to your menu buttons using the Advanced tab.
You can add new styles through the Fireworks Style panel. See the Fireworks Help files for more information.