滑动菜单的制作(组图)

菜单

今天应朋友们要求,来对我网站上一个滑动菜单效果写一篇简单的教程;在牛筋大学软件部有一个关于层滑动的效果,好像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。此刻展开按钮的行为面板如图:

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

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

时间: 2025-01-02 02:04:20

滑动菜单的制作(组图)的相关文章

dreamweaver中网页折叠菜单的制作(组图)

dreamweaver|菜单|网页 去过Microsoft的网站吗?(如图一)如果去过的话,那么你应该对这个站上面那条折叠式菜单的导航栏感到赞叹吧?("嘿嘿,还是老盖强.""啊,鸡蛋怎么会飞呀?!")你想过你也能够做出这样的效果吗?来吧,不用羡慕了,心动不如行动! 折叠式菜单实际上是通过层的显示和隐藏,来达到这种效果的.现在就让我来说说如何制作吧.FollowMe!先打开DreamWeaver(DreamWeaver对层的支持很好的,也是做网页的必备工具). 第一步

滑动菜单的制作

菜单 今天应朋友们要求,来对我网站上一个滑动菜单效果写一篇简单的教程:在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错.这个效果大家可以点击这里察看. 言归正传,废话少说.准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添加效果的页面). 2. 设置好你自己的css风格. 3. 在页面上插入一个长500pix的表格(这里说明:插入

Dreamweaver滑动菜单的制作

言归正传,废话少说.准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添加效果的页面). 2. 设置好你自己的css风格. 3. 在页面上插入一个长500pix的表格(这里说明:插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变,如果你的页面之前没有做相关设置,那么这一部你可能要费点功夫整理一下你的页面结构). 4. 将光标置入表格内,点击菜单 [插入--层] 插入一个长500高20的图层,并命名为layer1. 5. 然后再将光标置入图层layer1,点击菜单 [插入--层]

DW滑动菜单的制作

今天应朋友们要求,来对一个滑动菜单效果写一篇简单的教程:在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错.这个效果大家可以点击这里察看. 言归正传,废话少说.准备工作如下: 1.在Dreamweaver中新建一个空白文档(或者打开你要添加效果的页面). 2.设置好你自己的css风格. 3.在页面上插入一个长500pix的表格(这里说明:插入表

魏楠登《芭莎男士》揭秘电影预告片制作(组图)

魏楠(左)登<芭莎男士> 电影预告片制作人魏楠 魏楠 他是全亚洲最贵的.也是中国第一个电影预告片制作人.他的崭新而充满活力的制作公司承接了2010年中国50%商业影片的预告片制作.而这也是中国乃至亚洲唯一一个专业制作电影预告片的公司.这一切对于31岁的魏楠来说,只发生在最近的一年半时间里--中国国产电影市场的迅猛发展,通过这家预告片公司的迅速成长,可以管中窥豹. 商业电影预告片市场惊人成长的背后 先锋的发型,配上轮廓鲜明的脸庞,曾经学习过音乐和表演的魏楠每次在电影圈里行走,常被误以为是演员.&

jquery实现仿Flash的横向滑动菜单效果代码_jquery

本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

自己动手制作活动菜单条(组图)

菜单 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经过共同摸索发现用Dreamweaer就可以实现这种效果,下面我们通过一个活动菜单条的制作来看看吧. 第1步:制作菜单外貌 在Dreamweaer中新建一个文件,绘制一个层,在该层中插入一个表格(如图1),对该表格进行修饰,然后加入菜单项并建立各项的超链接,为了去掉超链接的下划线,可以编辑超链接的CSS样式,在CSS样式面板中通过CSS选择器将"Link

jQuery的animate方法制作滑动菜单

周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴.我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行. 正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,

AngularJS 中使用Swiper制作滚动图不能滑动的解决方法_AngularJS

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &