Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to make the effect of activity menu bar in Dreamweaver". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Step 1: make the menu appearance

Create a new file in Dreamweaer, draw a layer, insert a table in that layer (figure 1), modify the table, then add menu items and establish hyperlinks. In order to remove the underline of the hyperlink, you can edit the CSS style of the hyperlink, and set the "Decoration" of "Link" and "Hover" to "None" through the CSS selector in the CSS style panel. Set the "Color" of "Hover" to red, and finally apply the set style to each menu bar (you can press "F12" to preview the effect).

Step 2: design the dynamic effect of the menu

1. When the mouse becomes a "ten" shape, hold down the left button and drag the plane to the upper right corner of the page (so that the entire menu bar is fully exposed, but the upper edge is just close to the upper boundary of the page), open the timeline panel in the window menu, and drag the selected layer onto the timeline. Dreamweaer will automatically generate an animation object of 15 frames in length, and drag the last Keyframe of the animation object to frame 30. Set its length to 30 frames. Then right-click at frame 15, select the add Keyframe option from the pop-up shortcut menu to insert a Keyframe, and drag the layer to the appropriate location (figure 2).

Right-click again at frame 15 in the timeline window, select add Action from the pop-up shortcut menu, add an interactive behavior for that frame, and Dreamweaer will automatically open the behaviors panel. Click the "+" button in the behaviors panel, select "Timeline/Stop Timeline" from the pop-up menu, open the "Stop Timeline" dialog box, select "Timeline1" and click the "OK" button to close the dialog box. The event of the interactive behavior is "onFrame15" and the action is "Stop Timeline", so that when the timeline runs to frame 15, the animation will stop playing, thus realizing the function of menu bar bouncing back.

2. Add an interactive behavior of "Stop Timeline" at frame 30 of the timeline in the same way, thus realizing the function of menu pop-up. After adding these two interactions, a blue square appears above the corresponding frames in the timeline window, which represents an interaction. Select the Auto play and Loop check box to make the animation loop automatically (see figure 3).

3. Now you need to set a behavior so that you can continue to play after the timeline stops. My idea is this: in general, the menu bar bounces back but retains only the words "campus view" below, while the menu bar pops up again and is controlled by whether the mouse passes through the "campus view" on the menu bar. So you can go on like this: select the word "Campus Grand View" in the menu bar (make sure the hyperlink address of the word is "#", that is, empty link), click the "+" button in the behaviors panel, select "Timeline/Play Timeline" in the pop-up menu, and click the OK button after selecting "Timeline1" in the dialog box that pops up. At this time, a behavior will be added to the behavior panel. Select the "onMouseOver" event in its "Events" drop-down list to indicate that the animation is played when the mouse is over the word (figure 4).

An activity menu bar has been made. You can press "F12" key to preview its effect.

This is the end of the content of "how to make the effect of the active menu bar in Dreamweaver". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.