Building a DHTML Drop Down Menu with Dreamweaver
- Oct 25, 2002
- Article is provided courtesy of Prentice Hall Professional
- Downloading the Project Files
- Part 1: Layers 101
- Part 2: Setting the Z-Index
- Part 3: Setting the Initial Visibility Status
- Part 4: Attaching the Show-Hide Layers Behavior
From the author of
Essential Macromedia Dreamweaver 4 for Web Professionals
Part 4: Attaching the Show-Hide Layers Behavior
In this last section, you'll add the ever-important finishing touches to your drop-down menu. You'll begin by getting a quick overview of what behaviors are, and then you'll learn how to attach Dreamweaver's Show-Hide Layers behavior to different page elements to create the drop-down effect you're after.
First, let's get a quick overview of what a behavior actually is: A behavior is a Macromedia Dreamweaver term used to describe a visual way to quickly implement programming code without having to learn how to write any code. Behaviors simplify all the programming logic into a visual interface based on two things: an event and an action.
An event refers to something that happens in a Web browser—for example:
When a page loads, the JavaScript onLoad event occurs.
When a user moves the mouse over a graphic, the JavaScript onMouseOver event occurs.
An action refers to a prewritten piece of JavaScript code that runs when an action you're looking for occurs.
So, when you attach a behavior in Dreamweaver, you're doing two things:
Figuring out what event you want to watch for, and what action needs to take place
Using Dreamweaver's visual tool (Behaviors) to write the code that checks for the event and then performs the action
Both the event and the action JavaScript code are attached to an HTML page element, such as a link. Whenever the event occurs (for example, clicking a link), the action takes place (for example, displaying a rollover image).
As mentioned earlier, behaviors can be attached to HTML page elements, such as a graphic (<img src="..."), or the body (<body>) tag. Behaviors cannot be attached to a layer, but they can be attached to an element inside a layer or can make a layer do something. As mentioned earlier, this is why you placed a transparent image inside the hidedropdown layer; it will be used to capture an event (the onMouseOver event) and then perform an action (show or hide layers.)
Dreamweaver ships with a large number of prebuilt behaviors. The behavior you'll be using here is the Show-Hide Layers behavior. This behavior will allow you to check for the onMouseOver event on certain images and attach code to it that either shows or hides one or more layers, creating the drop-down menu effect.
In this next series of steps, you'll attach the Show-Hide Layers behavior to the Products graphic, located in the mainnav layer.
The first step is to select the target browsers you want to see behaviors for:
Click Window, Behaviors to display the Behaviors panel.
In the Behaviors panel, click the + icon. A long context-sensitive menu appears.
From the menu, select Show Events For.
Select 3.0 and Later Browsers from the submenu that appears.
From now on, when you click the + sign in the Behaviors panel, the only behaviors that appear are those that work in 3.0 and above Web browsers.
Next, attach the Show-Hide Layer behavior to the Products graphic:
Click the Products graphic, located in the mainnav layer, to select it.
Click the + icon in the Behaviors panel. A list of behaviors appears.
Select Show-Hide Layers from the list of behaviors. The Show-Hide Layers dialog box appears.
In the Named Layers list box, select the layer hidedropdown.
Click the Show button at the bottom of the dialog box. The word (show) appears after the layer hidedropdown.
Select the entry layer dropdown.
Click the Show button. The word (show) appears after the layer dropdown.
When your dialog box looks like the one in Figure 33, click the OK button to apply the settings.
Figure 33 Specifying the action to take: selecting the layers to show for
the drop-down menu.
)
Figure 33Next, let's confirm that the correct event is selected:
Click the Products graphic again. In the Behaviors panel, you will see two columns: Events and Actions. The Events column should say onMouseOver. In the Actions column, Show-Hide Layers appears.
Everything looks good. Go ahead and test this behavior: Press the F12 key to test your page. When the page loads, the drop-down menu will be hidden. When you move your mouse over the Products graphic, the drop-down menu appears. Cool.
But notice how the menu stays on the screen when you move your mouse off it. Let's attach the Show-Hide Layer behavior to the graphic in the hidedropdown layer to hide the layer when the mouse passes over it:
In the Layers panel, select the hidedropdown layer. The layer appears in the Dreamweaver document window.
Click inside the layer to select the transparent graphic, as shown in Figure 34.
Figure 34 Selecting the transparent graphic in the hidedropdown
layer.In the Behaviors panel, click the + icon.
Select Show-Hide Layers from the long menu that appears. The Show-Hide Layers dialog box appears.
In the Named Layers list box, select the layer hidedropdown, and then click the Hide button.
In the Named Layers list box, select the layer dropdown, and then click the Hide button.
)
Figure 34Both the hidedropdown and dropdown layers display (hide) next to them, which means that those layers will hide when a user moves the mouse off the transparent graphic. Click OK.
Press F12 to test your work: Move your mouse over the Products graphic. The drop-down menu appears. (The invisible hidedropdown layer appears as well.) Next, move your mouse away from the drop-down menu. The pointer passes over the transparent image and both layers disappear. Excellent!
The last thing you have to do is attach the Show-Hide Layer behavior to the Support graphic so that the layers hide when a user's mouse passes over it:
In the Layers panel, select the mainnav layer.
Click the Support graphic to select it.
In the Behaviors panel, click the + icon.
Select Show-Hide Layers from the long menu that appears. The Show-Hide Layers dialog box appears.
In the Named Layers list box, select the layer hidedropdown, and then click the Hide button.
In the Named Layers list box, select the layer dropdown, and then click the Hide button.
Click the OK button.
Press F12 to ensure that moving your mouse over the Support graphic hides the drop-down menu.
You're done. Now practice implementing drop-down menus on your own to get comfortable with the steps required. Once you get the hang of it, it won't take long to implement.
Account Sign In
View your cart