现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。
首先需要确定的是，制作滑动门导航菜单效果，不需要使用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