Easy sliding folding menu in Dreamweaver

The folding menu is a good choice in the case of a limited display plane. This kind of menu is usually folded up, and the menu only slides when the viewer moves the mouse over the menu.

Effect description

When the mouse is not on the menu, the menu is collapsed and looks like a normal menu bar, as shown in Figure 18-1. When the mouse is moved to the menu bar, the submenu of the menu slides slowly and expands, as shown in Figure 18-2.

Creative Thinking

First, enter text in a layer, form the state when the menu is folded, and then use the layer to expand the timeline animation to achieve the effect of sliding expansion menu.

Operation Steps

(1) Create a new file and add a layer. Create a new Web page file, add a parent layer (tier one) to the page, and a child layer (layer two), setting the size and position of the two layers, as shown in Figure 18-3.

(2) Set up tables and text. Insert a table in the Layer1 layer, set the height and background of the table, and then enter the text in the table and format the text, as shown in Figure 18-4.

(3) Setting the LAYER2 layer. Set the background color of the LAYER2 layer, enter text on it, set the hyperlink, add the Layer2 layer to the timeline, and then animate the Layer2 layer at a later time, as shown in Figure 18-5.

(4) Create a new timeline Timeline2, and then add the LAYER2 layer to the new timeline, as shown in Figure 18-6.

Tip: Different time axes can realize the control of different objects, but also can achieve a number of different animations.

(5) Set the timeline. Set the 15th frame of the 1th frame and timeline Timeline2 of the timeline Timeline1 (this is the last frame of the animation in frame 15th), as shown in Figure 18-7.

Hint: Just want to change the key frame of the time axis, can produce the animation effect directly, this example will the time axis Timeline1 1th frame Layer2 layer high set to 0px, this produces the layer slowly slide out of the animation effect.

(6) Add behavior. Select the first cell in the table, and then add OnMouseOver to the cell (when you move the mouse over the cell) to the playback timeline Timeline1, as shown in Figure 18-8.

(7) Continue adding behavior. Add 4 onmouseout to the cell (when the mouse moves away), and the parameter settings are shown in Figure 18-9.

(8) Add 2 behaviors. Select the Layer2 layer and add two onMouseOver and two onmouseout respectively, as shown in Figure 18-10.

(9) Save the Web page file, and then preview in IE, this example operation completed. Through the time axis of different objects at different times of the state, combined with the time axis play, stop and jump is the most basic way to achieve animation effect in Dreamweaver, readers can make full use of these features to achieve more brilliant results.