Make a navigation pull-down menu with Dreamweaver mx

Source: Internet
Author: User
Tags dreamweaver
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.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.