Friends who have used QQ to chat all love its automatic window hiding function, which can make the window look fresh, clean and dynamic. Several of my friends want to add similar stuff to their web pages, and after joint exploration, they found out This effect can be achieved with Dreamweaer. Let's take a look at the production of an active menu bar.
Step 1: Make the menu appearance.
Create a new file in Dreamweaer, draw a layer, insert a table in the layer (as shown in Figure 1), modify the table, then add menu items and create hyperlinks to each item. To remove the underline of a hyperlink, you can edit the CSS style of the hyperlink. In the CSS style panel, set the "Decoration" of both "Link" and "Hover" to "None" through the CSS selector. Hover"'s "Color" is set to red, and finally the set style is applied to each menu bar (you can press the "F12" key to preview the effect).
Figure 1
Step 2: Design the dynamic effect of the menu
1. Select the layer, hold down the left button when the mouse changes to a "cross" shape, and drag the layer 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 edge of the page), and open the time in the window menu Line panel, select the layer and drag it to the timeline. Dreamweaer will automatically generate an animation object with a length of 15 frames. Drag the last keyframe of the animation object to the 30th frame and set its length to 30 frames. . Then right-click at frame 15, select the "Add Keyframe" option in the pop-up shortcut menu to insert a keyframe, and drag the layer to the appropriate position (Figure 2).
Figure 2 Right-click again at frame 15 in the timeline window, select "Add Action" in the pop-up shortcut menu, add an interactive behavior to the frame, and Dreamweaer will automatically open the behavior panel. Click the "+" button in the behavior 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 reaches the 15th frame, the animation will stop playing, thus realizing the menu bar bounce function.
2. Use the same method to add a "Stop Timeline" interactive behavior at the 30th frame of the timeline, thus realizing the menu pop-up function. After adding these two interactive behaviors, a blue square appears on the corresponding frame in the timeline window, which represents an interactive behavior. Select the "Autoplay and Loop" checkbox to enable the animation to automatically loop (Figure 3).
Figure 3
3. Now you need to set up a behavior to allow the timeline to continue playing after it is stopped. My idea is this: in the normal state, the menu bar pops up but only retains the words "Campus Grand View" below, and the pop-up and rebound of the menu bar are controlled by whether the mouse passes over the "Campus Grand View" on the menu bar. . You can continue like this: select the word "Campus Grand View" in the menu bar (make sure the hyperlink address of this word is "#", that is, an empty link), click the "+" button in the behavior panel, and in the pop-up Select "Timeline/Play Timeline" from the menu, select "Timeline1" in the dialog box that pops up and click the OK button. At this time, a behavior will be added to the behavior panel, and select the "onMouseOver" event in its "Events" drop-down list. , indicating that the animation will be played when the mouse is over the word (Figure 4).
Figure 4 At this point, an active menu bar is completed. You can press the "F12" key to preview its effect.
But this menu bar has one shortcoming: it must disappear when the mouse passes through a specific area below the menu bar (in this case, the words "Campus Grand View"). If you want to make the menu bar pop up, just click Move the mouse away from the menu bar to make the menu disappear. You may need to use Fireworks or Flash. If you have any good methods, please write to us to discuss it.
