看到这一篇文章，想必你在学习CSS技术，CSS的含义你一定也不生疏：层叠样式表。我们需要注重样式的可层叠性。在以往的制作中，我们往往将导航菜单处理成直角的矩形，或者直接定义Border和Background的样式即完成了菜单的制作。难道我们只能这样了吗。我们需要制作出更加美观、实用、方便的菜单。
什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的部分就少一些。我们看下面的图片示例。
在上在的图示中，左边的窄的门，遮住了右链的宽的门。我们主要想实现了是图片的圆弧部份。中间的区域大小可以根据文本的多少来自适应。假如文本少，侧距离就近，相重叠就多。假如文本多就撑开了两扇门，让区域变大。大家应该能理解这样的思维。
我们用象处理软件，制作了四个图片，以备用：
下面我们来动手制作这个滑动门菜单，大家跟我一起做。假如有疑问，欢迎来我的主页21shipin.com给我留言。
首先我们需要创建一个无序列表来放置菜单的内容。xhtml代码如下：
Example Source Code
[www.21shipin.com]<div id="woaicss">
<ul>
<li><a href="#">Div CSS</a></li>
<li><a href="#">21shipin</a></li>
<li class="dang"><a href="#">21shipin.com</a></li>
<li><a href="#">CSS Web Design</a></li>
<li><a href="#">CSS Layout Example</a></li>
</ul>
</div>
我们写相应的样式，使菜单能初步成形。CSS代码如下：
Example Source Code
[www.21shipin.com]#woaicss {
width:100%
margin:0;
padding:0;
}
#woaicss ul {
margin:20px 0 0 18px;
padding:0;
list-style:none;
white-space: nowrap;
}
#woaicss li {
float:left;
margin:0;
padding:0;
background:url(hm_4.jpg) no-repeat right top;
}
在上面的代码中，我们首先设置容器woaicss的大小就外边距、内边距。设置无序列表的上边距为20PX，左边距为18PX。并设置了列表标记为无。
列表元素li为左浮动，并设置了背景图片，请注重背景图片的对齐方式：无重复、居右、顶端对齐。
我们运行一下看看效果，得到了如下图所示的样子。
菜单的链接文字距离左右边距太近期了，滑动门的另一扇（左侧）还没有定义。我们继续后面的制作，在CSS文件中加入如下的代码：
Example Source Code
[www.21shipin.com]#woaicss li a {
display:block;
background:url(hm_3.jpg) no-repeat left top;
padding:0 15px;
}
#woaicss li a:hover {
color:#c00;
}
我们定义li的链接区为块元素，设置背景图片，请注重背景图片的对齐方式：无重复、居左、顶端对齐。设置内边距：上下为零，左右为15PX。
我们运行一下看看效果，得到了如下图所示的样子。
至此，滑动门菜单的样子已经具备了，我们成功了实现了滑动门菜单的制作，但我们的菜单还不够美观，链接文字需要定义，需要制作链接菜单的“当前页”的样式。
我们继续制作，CSS代码如下：
Example Source Code
[www.21shipin.com]#woaicss li a {
display:block;
background:url(hm_3.jpg) no-repeat left top;
padding:0 15px;
font-size:15px;
color:#000;
font-weight:800;
text-decoration:none;
}
#woaicss li a:hover {
color:#c00;
}
#woaicss li.dang {
background:url(hm_2.jpg) no-repeat right top;
}
#woaicss li.dang a {
background:url(hm_1.jpg) no-repeat left top;
color:#fff;
}
#woaicss li.dang a:hover {
color:#fc0;
}
链接文字进行了定义，并设置了hover效果。
设置类dang的样式。这是当前页的效果。背景图片的定义与上面所讨论的类似。
我们形成完整的代码，运行下面的代码看最终的CSS滑动门菜单制作：
滑动门菜单的制作打破了一种方方正正矩形菜单的模式，让我们的页面设计可以更加的灵活方便，不必拘泥于代码的局限，大家多做偿试.
Source Code to Run [www.21shipin.com]
QQ：2693987339(点击联系)购买教程光盘
:
