Dreamweaver MX navigation drop-down menu

Since its debut, Dreamweaver's easy-to-use and powerful Behavior has always been one of the hot topics of attention. In Dreamweaver MX (dw mx), this function has been expanded and improved.

In dw mx, Action refers to an Action taken to respond to an Event ). Event indicatesBrowserSuch as window refresh and mouse movement. Action refers to the JavaScript code that responds to events in the background and can complete corresponding operations, such as playing sounds and turning pictures.

Using dw mx to create a navigation drop-down menu is one of the frequently used special effects on webpages. (Figure 1) it mainly applies the "Show-Hide Layers" behavior in dw mx.

Figure 1

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


Next, open the "Behaviors" panel and select the "Product Center" link (note that the layer just created cannot be selected at this time; otherwise, the "Show-Hide Layers" action cannot be applied ), click "+" and select "Show-Hide Layers". You can see that the layer we just created is hidden or displayed in the selection item (see figure 2 ).

Figure 2

The best use of behavior is mainly reflected in: if we want to implement a drop-down menu, the key is to move the mouse over the "Product Center" link to display the layer; while the mouse leaves the link, hide a layer. Based on this idea, we first set up two actions for this layer, one for Hide and the other for Show. Then, adjust the Event, set the Event of the Hide Layer to OnMouseOut, that is, move the mouse away from the link, and set the Event of the Show Layer to OnMouseOver, that is, select the link with the mouse. Press "F12" to preview the expected results.

In this way, we usually think that the mysterious navigation drop-down menu can be easily implemented in the middle. You can also apply the "Swap Image" action on the navigation link to flip the Image when you click the link.

Behavior is not an isolated special effect. You can combine multiple behavior combinations to implement complex functions. In addition to the default behavior set by dw mx, we can also download more cool third-party behaviors from www.mcromedia.com. We just need to copy them directly to the DreamweaverMXConfigurationBehaviorsActions directory, which will make dw mx more dazzling.</