How to make pop-up menus easy with Dreamweaver

dreamweaver| Menu

This article selected from the 4U2V studio prepared the "Dreamweaver Web page design and production of 100 cases" (People's Telecommunications publishing house, isbn:7115142394). Reprint of this article is prohibited without the written permission of the copyright owner.

Purchase Address: Click to visit

Pop-up menu is a very common menu in Web page making, which is not only simple in production but also good in effect.

　　Effect description

The effect of this example is that when you move the mouse over the text, a nice menu pops up, as shown in Figure 17-1 and figure 17-2.

　　Creative Thinking

This example first enters a line of text in a Web page, makes a special hyperlink to the text, and then makes a pop-up menu with the behavior of Dreamweaver MX 2004.

　　Operation Steps

(1) Enter 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, 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 up 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 page in the browser, the mouse cursor moved to the top of the text can be seen when 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.