看到这
![](/icons/38124yi.gif)
篇文章
![](/icons/38124dou.gif)
想必你在学习CSS技术
![](/icons/38124dou.gif)
CSS
![](/icons/38124de.gif)
含义你
![](/icons/38124yi.gif)
定也不陌生:层叠样式表
![](/icons/38124dou2.gif)
我们需要注意样式
![](/icons/38124de.gif)
可层叠性
![](/icons/38124dou2.gif)
在以往
![](/icons/38124de.gif)
制作中
![](/icons/38124dou.gif)
我们往往将导航菜单处理成直角
![](/icons/38124de.gif)
矩形
![](/icons/38124dou.gif)
或者直接定义Border和Background
![](/icons/38124de.gif)
样式即完成了菜单
![](/icons/38124de.gif)
制作
![](/icons/38124dou2.gif)
难道我们只能这样了吗
![](/icons/38124dou2.gif)
我们需要制作出更加美观、实用、方便
![](/icons/38124de.gif)
菜单
![](/icons/38124dou2.gif)
什么是滑动门技术?究其本意
![](/icons/38124dou.gif)
就是根据文本自适应大小
![](/icons/38124dou.gif)
进行滑动
![](/icons/38124dou2.gif)
我们可以用背景图片来营造这样
![](/icons/38124de.gif)
现象
![](/icons/38124dou.gif)
![](/icons/38124yi.gif)
个在左
![](/icons/38124yi.gif)
个在右
![](/icons/38124dou.gif)
把这两个图片想象成可以滑动
![](/icons/38124de.gif)
门
![](/icons/38124dou.gif)
当文本较少
![](/icons/38124de.gif)
时候
![](/icons/38124dou.gif)
两个图片重叠
![](/icons/38124de.gif)
就多些
![](/icons/38124dou.gif)
当文本较多
![](/icons/38124de.gif)
时候就滑动开
![](/icons/38124dou.gif)
重叠
![](/icons/38124de.gif)
部分就少
![](/icons/38124yi.gif)
些
![](/icons/38124dou2.gif)
我们看下面
![](/icons/38124de.gif)
图片举例
![](/icons/38124dou2.gif)
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052833463.jpg\")
在上在
![](/icons/38124de.gif)
图示中
![](/icons/38124dou.gif)
左边
![](/icons/38124de.gif)
窄
![](/icons/38124de.gif)
门
![](/icons/38124dou.gif)
遮住了右链
![](/icons/38124de.gif)
宽
![](/icons/38124de.gif)
门
![](/icons/38124dou2.gif)
我们主要想实现了是图片
![](/icons/38124de.gif)
圆弧部份
![](/icons/38124dou2.gif)
中间
![](/icons/38124de.gif)
区域大小可以根据文本
![](/icons/38124de.gif)
多少来自适应
![](/icons/38124dou2.gif)
如果文本少
![](/icons/38124dou.gif)
侧距离就近
![](/icons/38124dou.gif)
相重叠就多
![](/icons/38124dou2.gif)
如果文本多就撑开了两扇门
![](/icons/38124dou.gif)
让区域变大
![](/icons/38124dou2.gif)
大家应该能理解这样
![](/icons/38124de.gif)
思维
![](/icons/38124dou2.gif)
我们用象处理软件Software
![](/icons/38124dou.gif)
制作了 4个图片
![](/icons/38124dou.gif)
以备用:
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052897307.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052842706.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052880412.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052859763.jpg\")
下面我们来动手制作这个滑动门菜单
![](/icons/38124dou.gif)
大家跟我
![](/icons/38124yi.gif)
起做
![](/icons/38124dou2.gif)
如果有疑问
![](/icons/38124dou.gif)
欢迎来我
![](/icons/38124de.gif)
主页52css.com给我留言
![](/icons/38124dou2.gif)
首先我们需要创建
![](/icons/38124yi.gif)
个无序列表来放置菜单
![](/icons/38124de.gif)
内容
![](/icons/38124dou2.gif)
xhtml代码如下:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052877794.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]<divid=\"woaicss\">
<ul>
<li><ahref=\"#\">DivCSS</a></li>
<li><ahref=\"#\">52CSS</a></li>
<li
![](/icons/38124class.gif)
=\"dang\"><ahref=\"#\">52CSS.com</a></li>
<li><ahref=\"#\">CSSWebDesign</a></li>
<li><ahref=\"#\">CSSLayoutExample</a></li>
</ul>
</div>
我们写相应
![](/icons/38124de.gif)
样式
![](/icons/38124dou.gif)
使菜单能初步成形
![](/icons/38124dou2.gif)
CSS代码如下:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052877794.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]#woaicss{
width:100%
margin:0;
padding:0;
}
#woaicssul{
margin:20px;0018px;
padding:0;
list-style:none;
white-space:nowrap;
}
#woaicssli{
float:left;
margin:0;
padding:0;
background:url(hm_4.jpg)no-repeatrighttop;
}
在上面
![](/icons/38124de.gif)
代码中
![](/icons/38124dou.gif)
我们首先设置容器woaicss
![](/icons/38124de.gif)
大小就外边距、内边距
![](/icons/38124dou2.gif)
设置无序列表
![](/icons/38124de.gif)
上边距为20PX
![](/icons/38124dou.gif)
左边距为18PX
![](/icons/38124dou2.gif)
并设置了列表标记为无
![](/icons/38124dou2.gif)
列表元素li为左浮动
![](/icons/38124dou.gif)
并设置了背景图片
![](/icons/38124dou.gif)
请注意背景图片
![](/icons/38124de.gif)
对齐方式:无重复、居右、顶端对齐
![](/icons/38124dou2.gif)
我们运行
![](/icons/38124yi.gif)
下看看效果
![](/icons/38124dou.gif)
得到了如下图所示
![](/icons/38124de.gif)
样子
![](/icons/38124dou2.gif)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052858380.g<img)
\" border=\"0\" alt=\"\"/>
菜单
![](/icons/38124de.gif)
链接文字距离左右边距太近期了
![](/icons/38124dou.gif)
滑动门
![](/icons/38124de.gif)
另
![](/icons/38124yi.gif)
扇(左侧)还没有定义
![](/icons/38124dou2.gif)
我们继续后面
![](/icons/38124de.gif)
制作
![](/icons/38124dou.gif)
在CSS文件中加入如下
![](/icons/38124de.gif)
代码:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052877794.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]#woaicsslia{
display:block;
background:url(hm_3.jpg)no-repeatlefttop;
padding:015px;
}
#woaicsslia:hover{
color:#c00;
}
我们定义li
![](/icons/38124de.gif)
链接区为块元素
![](/icons/38124dou.gif)
设置背景图片
![](/icons/38124dou.gif)
请注意背景图片
![](/icons/38124de.gif)
对齐方式:无重复、居左、顶端对齐
![](/icons/38124dou2.gif)
设置内边距:上下为零
![](/icons/38124dou.gif)
左右为15PX
![](/icons/38124dou2.gif)
我们运行
![](/icons/38124yi.gif)
下看看效果
![](/icons/38124dou.gif)
得到了如下图所示
![](/icons/38124de.gif)
样子
![](/icons/38124dou2.gif)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052816313.g<img)
\" border=\"0\" alt=\"\"/>
至此
![](/icons/38124dou.gif)
滑动门菜单
![](/icons/38124de.gif)
样子已经具备了
![](/icons/38124dou.gif)
我们成功了实现了滑动门菜单
![](/icons/38124de.gif)
制作
![](/icons/38124dou.gif)
但我们
![](/icons/38124de.gif)
菜单还不够美观
![](/icons/38124dou.gif)
链接文字需要定义
![](/icons/38124dou.gif)
需要制作链接菜单
![](/icons/38124de.gif)
“当前页”
![](/icons/38124de.gif)
样式
![](/icons/38124dou2.gif)
我们继续制作
![](/icons/38124dou.gif)
CSS代码如下:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052877794.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]#woaicsslia{
display:block;
background:url(hm_3.jpg)no-repeatlefttop;
padding:015px;
font-size:15px;
color:#000;
font-weight:800;
text-decoration:none;
}
#woaicsslia:hover{
color:#c00;
}
#woaicssli.dang{
background:url(hm_2.jpg)no-repeatrighttop;
}
#woaicssli.danga{
background:url(hm_1.jpg)no-repeatlefttop;
color:#fff;
}
#woaicssli.danga:hover{
color:#fc0;
}
链接文字进行了定义
![](/icons/38124dou.gif)
并设置了hover效果
![](/icons/38124dou2.gif)
设置类dang
![](/icons/38124de.gif)
样式
![](/icons/38124dou2.gif)
这是当前页
![](/icons/38124de.gif)
效果
![](/icons/38124dou2.gif)
背景图片
![](/icons/38124de.gif)
定义和上面所讨论
![](/icons/38124de.gif)
类似
![](/icons/38124dou2.gif)
我们形成完整
![](/icons/38124de.gif)
代码
![](/icons/38124dou.gif)
运行下面
![](/icons/38124de.gif)
代码看最终
![](/icons/38124de.gif)
CSS滑动门菜单制作:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416052836830.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run
[www.52css.com] =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
滑动门菜单
![](/icons/38124de.gif)
制作打破了
![](/icons/38124yi.gif)
种方方正正矩形菜单
![](/icons/38124de.gif)
模式
![](/icons/38124dou.gif)
让我们
![](/icons/38124de.gif)
页面设计可以更加
![](/icons/38124de.gif)
灵活方便
![](/icons/38124dou.gif)
不必拘泥于代码
![](/icons/38124de.gif)
局限
![](/icons/38124dou.gif)
大家多做偿试
![](/icons/38124dou.gif)
欢迎你来我
![](/icons/38124de.gif)
主页52css.com和我交流
![](/icons/38124dou2.gif)
相信你能做出更加漂亮
![](/icons/38124de.gif)
效果
延伸阅读
最新评论