相关文章
ASP教程,ASP技巧,ASP实例,ASP文摘
北京网页设计DIV+CSS标准制作网页表单的select例子
北京网页设计使用Windows XP系统的风讯用户,请设置目录权限！
网站建设CSS+DIV网页特效欣赏：非常酷的角BANNER
网站建设Dreamweaver8实用技巧
网站制作CSS滤镜:blur属性
北京网站建设DreamweaverMX Ultradev探索(3-2)
网页设计荧光文字的制作
北京网站建设Dreamweaver MX进阶教程（十三）在Dreamweaver 中使用上标和下标
网站设计Dreamweaver的行为事件
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站设计网站建设滑动菜单的制作(组图)
网站设计网站建设滑动菜单的制作(组图)
作者： 北京网站建设 日期：2008-03-27 06:03:35 来源： http://www.qt-net.com
今天应朋友们要求，来对我网站上一个滑动菜单效果写一篇简单的教程；在牛筋大学软件部有一个关于层滑动的效果，好像Itnow上的广告也是采用的这样效果，不用的时候隐藏，用的时候点击一下按钮层就慢慢的滑动出来，即节省了有限的页面空间，还达到了令人羡慕的视觉效果，感觉起来还不错。这个效果大家可以点击这里察看.北京网站制作
企通互联
言归正传，废话少说。准备工作如下：网站制作
网页设计
1 北京网站建设． 在dw中新建一个空白文档（或者打开你要添加效果的页面）。网页设计
北京网站制作
2． 设置好你自己的css风格。网站设计
北京网站设计
3．在页面上插入一个长500pix的表格（这里说明：插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，如果你的页面之前没有做相关设置，那么这一部你可能要费点功夫整理一下你的页面结构）。网站建设
网页设计
4． 将光标置入表格内，点击菜单 [插入——层] 插入一个长500高20的图层，并命名为layer1。网站设计
北京网页设计
5． 北京网站制作然后再将光标置入图层layer1，点击菜单[插入——层]再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都设置为0，并为它指定一个你喜欢的背景色。北京网站制作
北京网站建设
6．然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特殊的用处，在我的这个教程中，我只不过是为了放置几个按钮而已。最后我的开起来如图：网站设计
网页设计
TIPS：这里这么做的目的是为了给你要滑动的图层前面加一个挡板，只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。网站建设
网站设计
现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。 北京网站设计1北京网站制作
网站制作
现在让我们再次重复上面的步骤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设置了两个按钮。北京网站建设
北京网站建设
2网站建设
企通互联
我们先设置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择[ 网站制作时间轴——播放时间轴]DW会弹出一个窗体，在上面的下拉菜单中选择timeline1。网站建设
网站建设
然后在行为面板中确认事件为onclick北京网页设计
网页设计网站建设
好了，到这里，你可以预览一下，当你点击上展开按钮时，你的图层就会慢慢的从上而下滑动出来！北京网站制作
北京网站制作
怎么样，看到了吧：）我们再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击在出来的菜单中选择[显示隐藏层]，在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其设置为隐藏，如图：网站设计
网站建设
好了，再预览一下，发现展开后点击关闭图层就没有了：）不过，似乎有一个问题，再次点击展开的时候，似乎没什么反应了，那是我们还有一个动作没有设置。北京网站建设
北京网站建设
重复刚才的步骤5，选择上展开按钮，添加动作[时间轴——转到时间轴桢]，在跳出的窗体中的下拉菜单选择timeline1，桢数添上1。网站建设
北京网站建设
好了，这次预览发现这个问题解决了。但是我们似乎还是忽略了一个问题，点击关闭后这个图层被设置为隐藏了，再点击展开也没反应了。还是运用老办法，给展开按钮添加一个动作就可以解决了！北京网站制作
企通互联
重复步骤5，选择[显示隐藏层]，和刚才步骤6相反，这次我们选择显示，确定后，保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图：网页设计
北京网站制作
网页设计
网站设计
企通互联
 |
网页设计
1 北京网站建设． 在dw中新建一个空白文档（或者打开你要添加效果的页面）。网页设计
北京网站制作
2． 设置好你自己的css风格。网站设计
北京网站设计
3．在页面上插入一个长500pix的表格（这里说明：插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，如果你的页面之前没有做相关设置，那么这一部你可能要费点功夫整理一下你的页面结构）。网站建设
网页设计
4． 将光标置入表格内，点击菜单 [插入——层] 插入一个长500高20的图层，并命名为layer1。网站设计
北京网页设计
5． 北京网站制作然后再将光标置入图层layer1，点击菜单[插入——层]再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都设置为0，并为它指定一个你喜欢的背景色。北京网站制作
北京网站建设
6．然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特殊的用处，在我的这个教程中，我只不过是为了放置几个按钮而已。最后我的开起来如图：网站设计
网页设计
 |
网站设计
现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。 北京网站设计1北京网站制作
网站制作
现在让我们再次重复上面的步骤5，再插入一个图层layer4,设置图层属性为宽500、150高，刚好是刚才layer2和layer3的高度之和，并将图层layer4调整到另外两个图层下面。如图：企通互联
北京网站制作
 |
网站建设企通互联
这时，我们点击ALT +F9打开时间轴面板，DW已经为我们添加了默认的时间轴Timeline1，然后，我们选中我们要滑动的图层layer4，在上面点击右键，选择[添加到时间轴]这时我们可以在时间轴面板中看到我们刚刚制定的图层layer4，这说明，我们已经添加成功了！北京网页设计
北京网站建设
 |
北京网页设计
 |
北京网站建设
 |
企通互联
我们先设置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择[ 网站制作时间轴——播放时间轴]DW会弹出一个窗体，在上面的下拉菜单中选择timeline1。网站建设
网站建设
 |
网页设计网站建设
 |
北京网站制作
怎么样，看到了吧：）我们再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击在出来的菜单中选择[显示隐藏层]，在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其设置为隐藏，如图：网站设计
网站建设
 |
北京网站建设
重复刚才的步骤5，选择上展开按钮，添加动作[时间轴——转到时间轴桢]，在跳出的窗体中的下拉菜单选择timeline1，桢数添上1。网站建设
北京网站建设
 |
企通互联
重复步骤5，选择[显示隐藏层]，和刚才步骤6相反，这次我们选择显示，确定后，保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图：网页设计
北京网站制作
 |
好，再次预览，一切正常！ 企通互联网页设计
北京网站建设
至此，这个效果就算完成了，当然，大家完全可以自我发挥制作出更好的效果来，但是万变不离其宗，只要我们掌握好了时间轴配合动作行为的运用，所有的效果只是操作问题：）
上一篇：网站建设用Dreamweaver MX制作文字特效(组图)
下一篇：北京网站设计用DW MX制作导航下拉菜单(组图)