Make a navigation pull-down menu with Dreamweaver mx

dreamweaver| Menu | Dreamweaver since his debut, its easy-to-use and powerful "behavior" (Behavior) has been one of the hot spots of concern. In Dreamweaver mx (DW mx), this feature has been expanded and improved.

In DW MX, behavior refers to an action (action) taken in response to an event. The event refers to browser events, such as window refreshes, mouse movements, and so on. And action refers to the background response to the event's JavaScript code, you can do the appropriate action, such as playing sound, flip pictures and so on.

Using DW MX to make a navigation pull-down menu is one of the most frequently used effects on Web pages. (Figure 1) mainly applies the behavior of "Show-hide Layers" in DW mx.

Figure 1

First make the navigation bar (in Figure 1, the "Product Center" column), then add a layer, as the Drop-down menu will be displayed in the position, and fill in the dropdown menu corresponding column.


Next, open the "Behaviors" panel and select the "Product Center" link (note that this is not the time to select the newly built layer, otherwise the "Show-hide Layers" behavior), click the "+" number, select "Show-hide Layers", You can see that the layer we just built can be set to hide or display in the selection (Figure 2).

Figure 2

The magic of behavior is embodied in: if we want to implement the Pull-down menu, the key is to let the mouse move to the "Product Center" link, so that the layer display, while the mouse left the link, so that the layer hidden. Based on this idea, we first set up two action for this layer, one for hide and one for show. Then, adjust the event to set the Hide layer event to onmouseout, which is to leave the link for the mouse, and the show layer event to onmouseover, that is, the mouse selected link. By "F12" preview, you can see the effect we expect.

In this way, we usually feel very mysterious navigation pull-down menu can be easily implemented in the behavior. You can also continue to apply the "Swap image" behavior on the navigation link to achieve a rollover effect when you click on the link.

Behavior is not an isolated effect, can be superimposed by a number of behavioral combinations to achieve complex functions, in addition to the DW MX default settings good behavior, we can download more and more cool third party behavior from www.mcromedia.com, we just copy them directly to DREAMWEAVERMX \configuration\behaviors\actions\ directory, so that this sparkle of DW MX more dazzling.