1 dreamweaver tutorial Making sliding menus Thu Dec 05, 2013 4:27 am
Admin
Admin
1 . In a new blank document dw ( or open the page you want to add an effect ) .
2 . Set up your own css style.
3 . Insert a long 500pix form on the page ( here Description : Insert a table is intended to maintain the relative position of the control layer unchanged at different resolutions , if you have not done before the relevant settings page , then this department you may want to fee -point effort tidy your page structure ) .
4 . Move the cursor into the form , click the menu [Insert - Layer ] to insert a layer of a long 500 high 20 named layer1.
5. Then the cursor is placed in layers layer1, click on the menu [ insert - layer ] and then insert a long 500 high 130 layers layer2; layer2 and the properties of the left and right margins are set to 0, and assign it one of your favorite background color.
6. Repeat steps 5 and then , and then insert a layer layer3, the usefulness of this layer is nothing special in my this tutorial, I was just a few buttons in order to place it . Finally, I opened up as shown :
TIPS: The goal here is to give the front of the layer you want to add a sliding shutter only when I click the layer before you this from the bottom layers slowly sliding out .
Now , before formally entering into the production process today, we want to make a sliding menu.
1 Let us now repeat the above step 5 , and then insert a layer layer4, set the layer properties to width 500 , 150 high , and just happens to be the height of layer2 and layer3 , and to adjust to the other two layers layer4 a layer below. Figure:
Then we click on the layer in front of him layer2 eyes closed , so it allows us to see the layer below layer4.
2 At this time , we click ALT + F9 to open the Timeline panel , DW has been added to the default Timeline Timeline1 for us, then we have to check our sliding layer layer4, above right click and select [ Add to Timeline ] at this point we can see the layers layer4 we just enacted in the Timeline panel , which shows that we have added a success!
3 Then we click on the first 15 frames on the timeline , the upper layers in the Properties panel layer4 margin adjusted to 150. Here, one can even make a sliding layer , you can drag the red box above the timeline slowly from 1 to 15 , you can see the layers you slowly slide from layer2 and layer3 below out !
4 Well, now we 'll just give this set a sliding layer layer4 his actions can be activated even over a Before that, I had in my add layer3 inserted a table , and set to layer4 two buttons.
5 We first set the layer to activate the sliding action . Expand the selection button , go to the behavior of the panel , click to select [ Timeline - Play Timeline ] out of the menu at the DW will pop up a window , in the above drop-down menu, select timeline1.
Then confirm onclick event in the behavior panel
Well, here, you can preview it, when you click on the expand button , your layer will slowly slide out from the top down !
6 how to see it We give a simple layer is added on the closing action , is to click on the Close button hidden layers . Close Select button , go to the behavior of the panel , click on the menu, select [ Show hidden layer ] , select the pop form on layer4, then click the Hide button below, set it to hide , as shown :
7 Well, then preview , click Close to start the discovery layer , there is no But , there seems to be a problem , click again to expand , it seems no response , then we have an action is not set .
Repeat step 5 just expand the choice button to add the action [ Timeline - Go to Timeline frame ] , select timeline1 out of form in the drop-down menu , added a few frames .
Well, the preview found this issue is resolved . But we still seem to ignore a problem, and click Close this layer is set to hide , and then click to expand did not respond. Still use the old way , to expand the button to add an action can be solved !
8 Repeat step 5 , select [ Show hidden layer ] , and just step 6 Instead, this time we choose to display , determined to ensure that the behavior of the panel show the hidden layers of the time onclick. At the moment the behavior of the expand button panel as shown :
Well, the preview again , everything is normal !
So far , this effect is even completed , of course , everyone can play themselves to produce better results , but eventually, as long as we grasp the timeline with the use of an action , but the effect of all operational issues : )]
2 . Set up your own css style.
3 . Insert a long 500pix form on the page ( here Description : Insert a table is intended to maintain the relative position of the control layer unchanged at different resolutions , if you have not done before the relevant settings page , then this department you may want to fee -point effort tidy your page structure ) .
4 . Move the cursor into the form , click the menu [Insert - Layer ] to insert a layer of a long 500 high 20 named layer1.
5. Then the cursor is placed in layers layer1, click on the menu [ insert - layer ] and then insert a long 500 high 130 layers layer2; layer2 and the properties of the left and right margins are set to 0, and assign it one of your favorite background color.
6. Repeat steps 5 and then , and then insert a layer layer3, the usefulness of this layer is nothing special in my this tutorial, I was just a few buttons in order to place it . Finally, I opened up as shown :
TIPS: The goal here is to give the front of the layer you want to add a sliding shutter only when I click the layer before you this from the bottom layers slowly sliding out .
Now , before formally entering into the production process today, we want to make a sliding menu.
1 Let us now repeat the above step 5 , and then insert a layer layer4, set the layer properties to width 500 , 150 high , and just happens to be the height of layer2 and layer3 , and to adjust to the other two layers layer4 a layer below. Figure:
Then we click on the layer in front of him layer2 eyes closed , so it allows us to see the layer below layer4.
2 At this time , we click ALT + F9 to open the Timeline panel , DW has been added to the default Timeline Timeline1 for us, then we have to check our sliding layer layer4, above right click and select [ Add to Timeline ] at this point we can see the layers layer4 we just enacted in the Timeline panel , which shows that we have added a success!
3 Then we click on the first 15 frames on the timeline , the upper layers in the Properties panel layer4 margin adjusted to 150. Here, one can even make a sliding layer , you can drag the red box above the timeline slowly from 1 to 15 , you can see the layers you slowly slide from layer2 and layer3 below out !
4 Well, now we 'll just give this set a sliding layer layer4 his actions can be activated even over a Before that, I had in my add layer3 inserted a table , and set to layer4 two buttons.
5 We first set the layer to activate the sliding action . Expand the selection button , go to the behavior of the panel , click to select [ Timeline - Play Timeline ] out of the menu at the DW will pop up a window , in the above drop-down menu, select timeline1.
Then confirm onclick event in the behavior panel
Well, here, you can preview it, when you click on the expand button , your layer will slowly slide out from the top down !
6 how to see it We give a simple layer is added on the closing action , is to click on the Close button hidden layers . Close Select button , go to the behavior of the panel , click on the menu, select [ Show hidden layer ] , select the pop form on layer4, then click the Hide button below, set it to hide , as shown :
7 Well, then preview , click Close to start the discovery layer , there is no But , there seems to be a problem , click again to expand , it seems no response , then we have an action is not set .
Repeat step 5 just expand the choice button to add the action [ Timeline - Go to Timeline frame ] , select timeline1 out of form in the drop-down menu , added a few frames .
Well, the preview found this issue is resolved . But we still seem to ignore a problem, and click Close this layer is set to hide , and then click to expand did not respond. Still use the old way , to expand the button to add an action can be solved !
8 Repeat step 5 , select [ Show hidden layer ] , and just step 6 Instead, this time we choose to display , determined to ensure that the behavior of the panel show the hidden layers of the time onclick. At the moment the behavior of the expand button panel as shown :
Well, the preview again , everything is normal !
So far , this effect is even completed , of course , everyone can play themselves to produce better results , but eventually, as long as we grasp the timeline with the use of an action , but the effect of all operational issues : )]