Today, at the request of my friends, I will write a simple tutorial on the effect of a sliding menu on my website; in the software department of Niujiang University, there is an effect on layer sliding. It seems that the advertisements on Itnow also use this effect. When not in use Hidden, when you click the button layer, it will slowly slide out, which saves limited page space and achieves an enviable visual effect, which feels pretty good. You can click here to view this effect.
Let’s get down to business and stop talking nonsense. The preparations are as follows:
1. Create a new blank document in dw (or open the page you want to add effects to).
2. Set your own css style.
3． Insert a 500pix long table on the page (note here: the purpose of inserting the table is to keep the relative position of the control layer unchanged at different resolutions. If your page has not made relevant settings before, then you may have to do this Spend some time organizing your page structure).
4. Place the cursor in the table, click the menu [Insert - Layer] to insert a layer with a length of 500 and a height of 20, and name it layer1.
5. Then put the cursor into the layer layer1, click the menu [Insert - Layer] and insert a layer layer2 with a length of 500 and a height of 130; set the left margin and top margin of the properties of layer2 to 0, and specify it A background color you like.
6． Then repeat the method in step 5 and insert a layer layer3. This layer has no special use. In my tutorial, I just want to place a few buttons. In the end, mine turned out like this:
TIPS: The purpose of doing this here is to add a baffle in front of the layer you want to slide. Only when you click it will the layer slowly slide out from under your layer.
Now we are officially entering into the production process of the sliding menu we are going to create today.
Now let us repeat step 5 above again, insert another layer layer4, set the layer properties to width 500 and height 150, which is exactly the sum of the heights of layer2 and layer3, and adjust layer layer4 to the other two images. layer below. As shown in the picture:
Then we click on the eye in front of layer 2 to close it, so that we can see the layer 4 below it.
At this time, we click ALT + F9 to open the timeline panel. DW has added the default timeline Timeline1 for us. Then, we select the layer we want to slide, layer4, right-click on it, and select [Add to Timeline]. At this time, we can see the layer layer4 we just created in the timeline panel, which shows that we have added it successfully! 
Then we click on the 15th frame on the timeline and adjust the top margin in the properties panel of layer 4 to 150. At this point, a sliding layer is ready. You can drag the red square on the timeline slowly from 1 to 15, and you can see your layer slowly sliding from under layer2 and layer3. come out! 
Okay, now we only need to set an action for this sliding layer layer4 to activate it, and that’s over:) Before this, I have inserted a table on the layer3 I added and set two for layer4 button.
We first set up the action to activate the sliding layer. Select Expand this button, go to the Behavior panel, and click
Select [Timeline - Playback Timeline] in the menu that comes out. DW will pop up a form, select timeline1 in the drop-down menu above.
Then confirm the event is onclick in the behavior panel
Okay, here you can preview it. When you click the expand button, your layers will slowly slide out from top to bottom!
How about it, you can see it:) Let's add a simple closing action to the layer, that is, the layer will be hidden after clicking the close button. Select the Close button, go to the Behavior panel, and click Select [Show Hidden Layers] in the menu that pops up, select layer 4 in the pop-up form, and then click the Hide button below to set it to hidden, as shown in the figure: 
Okay, I previewed it again and found that after expanding it, I clicked to close the layer and it disappeared:) However, there seems to be a problem. When I clicked to expand again, nothing seems to happen. That is because we still have an action that has not been set.
Repeat step 5 just now, select the expand button, add the action [Timeline - Go to Timeline Frame], select timeline1 from the drop-down menu in the pop-up form, and add 1 to the frame number.
Well, this preview found that this problem has been solved. But we still seem to have overlooked a problem. After clicking to close, the layer is set to hidden, and then clicking to expand does not respond. Just use the old method and add an action to the expand button to solve the problem!
Repeat step 5 and select [Show Hidden Layer]. Contrary to step 6 just now, this time we select show. After confirmation, ensure that the time when the hidden layer is displayed in the behavior panel is onclick. The behavior panel of the expanded button at this moment is as shown below:
OK, preview again, everything is fine!
At this point, the effect is complete. Of course, everyone can create better effects by themselves, but it remains the same. As long as we master the use of the timeline and action behaviors, all effects are just a matter of operation: )