Using DW MX to make navigation pull-down menu (PHOTOS)

Menu | La Dreamweaver since his debut, its easy-to-use and powerful "behavior" (Behavior) has been one of the hotspots of concern. In Dreamweavermx (DWMX), this function has been expanded and improved.





in dwmx, 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 in Web pages. (Figure 1) mainly applies the "show-hidelayers" behavior 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, this time can not select the newly built layer, or you can not apply the "show-hidelayers" behavior), click the "+" number, select "Show-hidelayers", 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, the Hidelayer event is set to onmouseout, that is, the mouse left the link, and the Showlayer event set 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 "swapimage" behavior on the navigation links to achieve a picture 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 DWMX default settings, we can also download more and more cool third party behavior from www.mcromedia.com , We simply copy them directly into the dreamweavermx\\configuration\\behaviors\\actions\\ directory so that the DWMX's sparkle is more dazzling.