看到这一篇文章，想必你在学习CSS技术，CSS的含义你一定也不生疏：层叠样式表。我们需要注重样式的可层叠性。在以往的制作中，我们往往将导航菜单处理成直角的矩形，或者直接定义Border和Background的样式即完成了菜单的制作。难道我们只能这样了吗。我们需要制作出更加美观、实用、方便的菜单。

　　什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的部分就少一些。我们看下面的图片示例。

　　在上在的图示中，左边的窄的门，遮住了右链的宽的门。我们主要想实现了是图片的圆弧部份。中间的区域大小可以根据文本的多少来自适应。假如文本少，侧距离就近，相重叠就多。假如文本多就撑开了两扇门，让区域变大。大家应该能理解这样的思维。

　　我们用象处理软件，制作了四个图片，以备用：

　　下面我们来动手制作这个滑动门菜单，大家跟我一起做。假如有疑问，欢迎来我的主页给我留言。

　　首先我们需要创建一个无序列表来放置菜单的内容。xhtml代码如下：

Example Source Code []

<div id="woaicss">
<ul>
<li><a href="#">Div CSS</a></li>
<li><a href="#"></a></li>
<li class="dang"><a href="#"></a></li>
<li><a href="#">CSS Web Design</a></li>
<li><a href="#">CSS Layout Example</a></li>
</ul>
</div>

　　我们写相应的样式，使菜单能初步成形。CSS代码如下：

Example Source Code []

#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 []

#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 []

#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 []