现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。
首先需要确定的是，制作滑动门导航菜单效果，不需要使用JavaScript，而仅仅需要使用DIV+CSS技术即可。这对于很多人来说挺值得兴奋的，因为不需要通过JS就能完成这一功能，省却了很多的代码工作。
下面来看看代码吧：
<style>
.btn{
position: absolute;
left: 300px;
top: 100px;
height: 21px;
line-height: 19px;
color: #fff;
font-size: 12px;
overflow: hidden;
}
.btn .l{
float: left;
width: 8px;
height: 21px;
background: url(images/l.png) no-repeat 0 0;
}
.btn .c{
float: left;
font-style:normal;
background: url(images/c.png) repeat-x 0 0;
height: 19px;
}
.btn .r{
float: right;
width: 8px;
height: 19px;
background: url(images/r.png) no-repeat 0 0;
}
</style>
<div class="btn">
<i class="l"></i>
<i class="c">测试文字</i>
<i class="r"></i>
</div>
效果：
1.jpg
2.jpg
