站长学堂
你的位置: 中国个人站长站 -- 站长学堂 -- 网页制作 -- Dreamweaver教程 -- 文章正文 滑动菜单的制作
推荐位

滑动菜单的制作

中国个人站长站 Dreamweaver教程 点击数: 更新时间:2005-3-13 17:32:45

  今天应朋友们要求,来对我网站上一个滑动菜单效果写一篇简单的教程;在牛筋大学软件部有一个关于层滑动的效果,好像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设置了两个按钮。

 

[1] [2] 下一页

Dreamwea… 网友投稿 文章录入:swh    责任编辑:swh 
个人站长站与你风雨同舟!
本站所提供的资源均来源于互联网,如有侵权行为,请与本站管理员联系,我们会第一时间删除!
·如果您发现《滑动菜单的制作》文章有错误,也请通知我们修改!
联系邮箱chinageren#126.com,谢谢支持!
站内搜索:
广告服务 | 友情链接 | 联系我们 | 免责声明 | 用户留言 | 网站导航
版权所有:中国个人站长站 2007-2008 未经授权禁止复制或建立镜像 客服QQ号:112731235
copyright © 2007-2008 www.ChinaGeRen.com online services. all rights reserved. 苏ICP备05000059号