How to make a pop-up menu in Dreamweaver

Source: Internet
Author: User
Tags dreamweaver

The effect we're making is that when the mouse moves to the text, a nice menu pops up, as shown in Figure 17-1 and figure 17-2.

The specific steps are as follows:

1, enter the text and set the hyperlink. Enter text in the Web page, because the individual text text is not able to add behavior, according to the Convention in Dreamweaver, the text of the hyperlink set to JavaScript:; "To add behavior. So the hyperlink to the text is set to Javascript:; , and perform the Show pop-up menu behavior, as shown in Figure 17-3.

2, set up menu items and submenus, and set hyperlinks to menus, and then arrange the order of each menu, as shown in Figure 17-4.

3, set the page element. Set the menu to a vertical menu, and set the font, font size, alignment, general state, and mouse-sliding state of the menu separately, as shown in Figure 17-5.

4, set the "Advanced" label. Set the delay time for the menu in the Advanced tab option and whether to display a menu border. Then set the width, color, shadow, and highlight of the border, as shown in Figure 17-6.

Note: The unit of time in "menu delay" is milliseconds (ms), 1000 milliseconds equals 1 seconds, and the conversion is noted when setting.

5, set the x-axis and y-axis parameters. Set the x-axis and y-axis parameters of the pop-up menu in the Location tab option, which represents the distance from the upper-left corner of the pop-up menu to the upper-left corner of the page, as shown in Figure 17-7.

6, Save the Web page file, and then open the Web page in the browser, the mouse cursor moved to the top of the text can be seen with the menu pop-up, this example operation completed. Through Dreamweaver, can quickly produce the past can only use complex code to achieve the pop-up menu, so that can achieve complex menu pop-up and contraction, easy to use and make the page beautiful, neat.

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.

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.