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

Source: Internet
Author: User
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 , We simply copy them directly into the dreamweavermx\\configuration\\behaviors\\actions\\ directory so that the DWMX's sparkle is more dazzling.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.