您现在的位置:主页 > 网站制作 > 界面设计 >

滑动菜单的制作(组图)

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-09 点击:

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

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片

今日头条

更多>>

推荐图文

  • TeamCola信息结构:互联网产品前期设计方法
  • 常用交互实例:axure常用交互实例日历控件
  • 探索图标设计的微观世界:从符号学说起
  • 建立完美的同学录之浅谈同学录的完善包装
  • 百度搜索客户端设计分享:全新的视觉和交互体验
  • 网站设计师在设计网站时应该遵循的原则
  • 网页进度条设计:关于讨论loading加载后的一些心得
  • 网页制作小技巧:揪出网页无效链接
  • 美化网页 制作精美圆角表格
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款