一种简单的滑动门导航

这种方法是我在CSS彻底研究的视频中学到的，图像也是用它的图片：

  hover.gif

 under.gif

 

视频上方法是比较好的，就是他的HTML结构不太标准，我简化HTML如下：

 <ul>
2 <li><a href="#"><span>Home</span></a></li>
3 <li><a href="#"><span>About</span></a></li>
4 <li><a href="#"><span>News</span></a></li>
5 <li><a href="#"><span>Products</span></a></li>
6 <li><a href="#"><span>Services</span></a></li>
7 <li><a href="#"><span>Clients</span></a></li>
8 <li><a href="#"><span>Case Studies</span></a></li>
9 </ul>

 

CSS代码如下，我会做点解释，但如果能去试试，就很好理解了：

 1 ul {
 2     margin: 0;
 3     padding: 0;
 4     background: url(images/under.gif);
 5     height: 35px;
 6 }
 7 
 8 ul li {
 9     list-style-type: none;
10     float: left;
11 }
12 
13 ul a {
14     display: block;
15     color: #fff;
16     text-decoration: none;
17     line-height: 35px;
18     padding: 0 1em;
19 }
20 
21 ul a:hover {
22     background: url(images/hover.gif) no-repeat top left;
23     padding-right: 0;
24 }
25 
26 ul a:hover span {
27     background: url(images/hover.gif) no-repeat top right;
28     display: block;
29     padding-right: 1em;
30 }

首先在a:hover上应用背景图像，然后再span上应用背景图像，span上的背景图像
会遮住a:hover的左边，经过细节调整，就可以显示出一个按钮效果，呵呵，解释不
是清楚。