DW滑动菜单的制作

今天应朋友们要求,来对一个滑动菜单效果写一篇简单的教程;在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错。这个效果大家可以点击这里察看。

言归正传,废话少说。准备工作如下:

1、在Dreamweaver中新建一个空白文档(或者打开你要添加效果的页面)。

2、设置好你自己的css风格。

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

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

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

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

图1

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

时间: 2024-12-27 10:44:52

DW滑动菜单的制作的相关文章

滑动菜单的制作

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

滑动菜单的制作(组图)

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

Dreamweaver滑动菜单的制作

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

jQuery的animate方法制作滑动菜单

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

30个下拉菜单和滑动菜单设计实例

30个很棒的下拉菜单和滑动菜单设计实例,值得参考. 每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futu

简单的滑动菜单

菜单 <!---  简单的滑动菜单   徐祖宁(唠叨)  2003.03  czjsz_ah@stats.gov.cn   滑动菜单是一种较常用的菜单形式,在罗列二级分类的场合下广泛使用.其特点是代码量极小,数据描述简洁.  本例使用无线表格,以类的书写方式表述.  本代码可自由扩散.---><style>table {font-size = 9pt}td {height = 20px}</style><body><span id="menu

位图菜单的制作

菜单 *******************************************************实用环境:pb6.5\pb70\pb80\pb90功    能:位图菜单的制作方    法:如下*******************************************************第一步,首先要建立一个menu对象,命名为:m_bitmap.设计格式有一个主菜单 File,下面有4个子菜单new\open ave\exit,如下: ----File----

30个很棒的下拉菜单和滑动菜单设计实例

每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futuro Apple Reviews Archer Gr

Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效

记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个朋友在评论中留言,希望我可以 帮他将这个滑动菜单改成双向滑动的方式.当时也没想花太多时间,简单修改了一下就发给了他,结果没想 到后来却有一大批的朋友都来问我要这份双向滑动菜单的代码.由于这份代码写得很不用心,我发了部分朋 友之后实在不忍心继续发下去了,于是决定专门写一篇文章来介绍更好的Android双向滑动菜单的实现方法. 在开始动手之前先来讲一下实现原理,在一个Activity的布局中需要有三部分,一个是左侧菜单的布 局,一