<b>滑动菜单的制作</b>[DW设计]

　本日应朋友们要求,来对我上一个滑动菜单效果写一篇简单的;在牛筋大学软件部有一个关于层滑动的效果,仿佛Itnow上的广告也是采取的这样效果,不用的时刻躲藏,用的时刻点击一下按钮层就渐渐的滑动出来,即节俭了有限的页面空间,还到达了令人羡慕的效果,感受起来还不错.这个效果大家可以点击这里察看.




　　言归正传,废话少说.预备工作以下:

　　1． 在dw中新建一个空白文档（大概翻开你要增添效果的页面）.

　　2． 设置好你自己的CSS气势.

　　3． 在页面上插入一个长500pix的表格（这里阐明:插入表格的目的是为了掌握层在差别辨别率下保持相对的位置不变,假如你的页面之前没有做相关设置,那么这一部你大概要费点工夫整理一下你的页面构造）.

　　4． 将光标置入表格内,点击菜单 [插入——层] 插入一个长500高20的图层,并命名为layer1.

　　5． 然后再将光标置入图层layer1,点击菜单 [插入——层] 再插入一个长500高130的图层layer2;并将layer2的属性中左边距和上边距都设置为0,并为它指定一个你喜好的后台色.

　　6． 然后反复步骤5的办法,再插入一个图层layer3,这个图层没什么特别的用处,在我的这此中,我只不过是为了安排几个按钮罢了.最后我的开起来如图:



　　TIPS:这里这么做的目的是为了给你要滑动的图层前面加一个挡板,只有当点击的时刻图层才从你的这个图层下缓缓的滑动出来.

　　目前开始,才正式进入到我们本日要制作的滑动菜单的制作历程中.



　　目前让我们再次反复上面的步骤5,再插入一个图层layer4,设置图层属性为宽500 、150高,刚好是方才layer2和layer3的高度之和,并将图层layer4调整到别的两个图层下面.如图:



　　然后我们点击图层layer2前面的眼睛让他闭合,这样可以让我们看到它下面的图层layer4.



　　这时,我们点击ALT + F9 翻开时间轴面板,DW已经为我们增添了默许的时间轴Timeline1,然后,我们选中我们要滑动的图层layer4,在上面点击右键,挑选 [增添到时间轴] 这时我们可以在时间轴面板中看到我们方才拟定的图层layer4,这阐明,我们已经增添成功了!





　　然后我们点击时间轴上的第15桢,将图层layer4的属性面板中的上边距调整为150.到这里,一个能滑动的图层就算做好了,你可以拖动时间轴上面的红色方块渐渐从1走向15,你便可以看到你的这个图层渐渐的从layer2和layer3下面滑动出来!





　　好了,目前我们只需求给这个会滑动的图层layer4设置一个可以激活他的行动就算over了:）这之前,我已经在我增添的layer3上插入了一个表格,并为layer4设置了两个按钮.

 
 

　　我们先设置激活滑动图层的行动.挑选上展开这个按钮,转到行为面板,点击在出来的菜单中挑选 [时间轴——播放时间轴] DW会弹出一个窗体,在上面的下拉菜单中挑选timeline1.



　　然后在行为面板中确认事件为onclick



　　好了,到这里,你可以预览一下,当你点击上展开按钮时,你的图层就会渐渐的从上而下滑动出来!



　　怎么样,看到了吧:）我们再给图层增添上一个简单的关闭行动,就是点击关闭按钮后图层躲藏.挑选上关闭按钮,转到行为面板,点击在出来的菜单中挑选 [显示躲藏层] ,在跳出的窗体中挑选上layer4,然后点击下面的躲藏按钮,将其设置为躲藏,如图:





　　好了,再预览一下,发现展开后点击关闭图层就没有了:）不过,仿佛有一个问题,再次点击展开的时刻,仿佛没什么反映了,那是我们还有一个行动没有设置.

　　反复方才的步骤5,挑选上展开按钮,增添行动 [时间轴——转到时间轴桢] ,在跳出的窗体中的下拉菜单挑选timeline1,桢数添上1.



　　好了,这次预览发现这个问题办理了.但是我们仿佛还是忽视了一个问题,点击关闭后这个图层被设置为躲藏了,再点击展开也没反映了.还是应用老办法,给展开按钮增添一个行动便可以办理了!



　　反复步骤5,挑选 [显示躲藏层] ,和方才步骤6相反,这次我们挑选显示,肯定后,保证行为面板中显示躲藏图层的时间都是onclick.目前展开按钮的行为面板如图:



　　好,再次预览,一切正常!

　　至此,这个效果就算完成了,当然,大家完好可以自我施展制作出更好的效果来,但是万变不离其宗,只要我们掌握好了时间轴配合行动行为的应用,全部的效果只是操作问题:）