Step 1: Make 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 establish hyperlinks for each item. You can edit the CSS style of the hyperlink in order to delete the underline of the hyperlink. In the CSS style panel, set the Decoration of Link and Hover to None through the CSS selector, set the Color of Hover to red, and finally apply the set style to each menu bar (press "F 12" to preview the effect.
Step 2: Design the dynamic effect of the menu.
1. Select a layer. When the mouse turns into a cross, hold down the left key and drag the layer to the upper right corner of the page (so that the entire menu bar is completely exposed but the upper edge is just near the upper boundary of the page). Open the timeline panel in the window menu and drag the selected layer to the timeline. Dreamweaer will automatically generate an animated object with the length of 15 frame, and drag the last key frame of the animated object to the 30th frame. Then right-click at the 15 frame, select the "Add Keyframe" option in the pop-up shortcut menu to insert a keyframe, and drag the layer to the appropriate position (as shown in Figure 2).
Right-click the 15 frame in the timeline window again, and select "Add Action" in the pop-up shortcut menu to add interactive behavior to the frame. Dreamweaer will automatically open the Behavior Panel. Click the+button in the Behaviors panel, select Timeline/Stop Timeline from the pop-up menu to open the Stop Timeline dialog box, select Timeline 1 and click OK to close the dialog box. The event of interactive behavior is "onFrame 15" and the action is "stop the timeline", so that when the timeline runs to the first 15 frame, the animation will stop playing, thus realizing the function of menu bar bouncing.
2. Similarly, add an interactive behavior of "Stop Timeline" in the 30th frame of Timeline to realize the function of menu pop-up. After adding these two interactive behaviors, a blue square will appear above the corresponding frame in the timeline window, indicating an interactive behavior. Select the "Auto Play and Loop" checkbox to make the animation loop automatically (as shown in Figure 3).
3. Now we need to set a behavior so that we can continue playing after the timeline stops. My idea is this: under normal circumstances, the menu bar bounces but only the words "Campus Grand View" below are kept. The popup and bounce of the menu bar again is controlled by whether the mouse passes through the "Campus Grand View" on the menu bar. You can go on like this: select the word "Campus Grand View" in the menu bar (make sure that the hyperlink address of this word is "#", that is, empty link), click the+button in the behavior panel, select "Timeline/Play Timeline" in the pop-up menu, select "Timeline 1" in the pop-up dialog box, and then click the OK button, and a new button will be added in the behavior panel. Select the "onMouseOver" event in the "Event" drop-down list, which means that the animation will be played when the mouse is over the word (as shown in Figure 4).
An active menu bar has been made. You can press the "F 12" key to preview its effect.