DW滑动菜单的制作

言归正传，废话少说。准备工作如下：

　　

1、在Dreamweaver中新建一个空白文档（或打开您要添加效果的页面）。

　　

2、配置好您自己的css风格。

　　

3、在页面上插入一个长500pix的表格（这里说明：插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，假如您的页面之前没有做相关配置，那么这一步您可能要费点功夫整理一下您的页面结构）。

　　

4、将光标置入表格内，点击菜单 [插入――层] 插入一个长500高20的图层，并命名为layer1。

　　

5、然后再将光标置入图层layer1，点击菜单 [插入――层] 再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都配置为0，并为他指定一个您喜欢的背景色。

　　

6、然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特别的用处，在我的这个教程中，我只但是是为了放置几个按钮而已。最后如图1：

　　

　　图1

　　

TIPS：这里这么做的目的是为了给您要滑动的图层前面加一个挡板，只有当点击的时候图层才从您的这个图层下缓缓的滑动出来。

　　

现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。

　　7、现在让我们再次重复上面的步骤5，再插入一个图层layer4，配置图层属性为宽500 、150高，刚好是刚才layer2和layer3的高度之和，并将图层layer4调整到另外两个图层下面。如图2：

　　

　　图2

　　8、然后我们点击图层layer2前面的眼睛让他闭合，这样能够让我们看到他下面的图层layer4。

　　

9、这时，我们点击ALT F9 打开时间轴面板，Dreamweaver已为我们添加了默认的时间轴Timeline1，然后，我们选中我们要滑动的图层layer4，在上面点击右键，选择 [添加到时间轴] 这时我们能够在时间轴面板中看到我们刚刚定制的图层layer4，这说明，我们已添加成功了！

　　

　　图4

　　10、然后我们点击时间轴上的第15桢，将图层layer4的属性面板中的上边距调整为150。到这里，一个能滑动的图层就算做好了，您能够拖动时间轴上面的红色方块慢慢从1走向15，您就能够看到您的这个图层慢慢的从layer2和layer3下面滑动出来！

　　

　　图5

　　

好了，现在我们只需要给这个会滑动的图层layer4配置一个能够激活他的动作就算over了：）这之前，我已在我添加的layer3上插入了一个表格，并为layer4配置了两个按钮。

　　

　　图6

　　11、我们先配置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择 [时间轴――播放时间轴] Dreamweaver会弹出一个窗体，在上面的下拉菜单中选择timeline1。

　　

　　图7

　　

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

　　

　　图8

　　

好了，到这里，您能够预览一下，当您点击上展开按钮时，您的图层就会慢慢的从上而下滑动出来！

　　

13、怎么样，看到了吧：）我们再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击在出来的菜单中选择 [显示隐藏层] ，在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其配置为隐藏，如图9：

　　

　　图9

　　

好了，再预览一下，发现展开后点击关闭图层就没有了：）但是，似乎有一个问题，再次点击展开的时候，似乎没什么反应了，那是我们更有一个动作没有配置。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有