在我知道这项技术之前，我的导航栏中的每个按钮都是用的不同的图片。我发现这样的导航栏不仅对用户不够友好，而且需要更多的CSS代码。同时，在载入站点的时候也会花费更多的时间占用更多带宽。在这个教程中，我将教会你怎样用CSS实现单张图片的导航栏。从我过去的一些教程中你应该知道了怎样创建图片，所以本文就不再赘述导航用的图片怎么创建。好了，现在开始…

　　图像

　　如上图，我不会告诉你怎么制作这张图片，但是你可以下载我提供的PSD文档来作为参考。在上面的图片中，我提供了四种不同的颜色，你可以根据自己的喜好来编辑它们。点击这里下载我特别为你准备的PSD文件。你在创建导航栏按钮的时候需要的只是一个如下图所示的493像素*24像素的图片。

　　我们在开始之前，先来看看我们通过这个教程最终达到的导航效果吧。

　　概念

　　CSS中“滑动门”是指是导航菜单中按钮的背景图像。我在下面的超链接中使用了一个span标签来定位到图像的一部分。超链接会自动定位到图像的另一部分。这意味着，最重要的部分是背景图片的位置。

　　HTML

[code lang=”js”]

<ul>
<li><a title="home" href="#">home</a></li>
<li><a title="products" href="#">products</a></li>
<li><a title="blog" href="#">blog</a></li>
<li><a title="contact" href="#">contact</a></li>
</ul>

[/code]

　　现在我给每一个超链接加入一个<span>标签，以便定位到背景图片的最左侧。

[code lang=”js”]
<ul>
<li><a class="current" title="home" href="#"><span>home</span></a>
</li>
<li><a title="products" href="#"><span>products</span></a></li>
<li><a title="blog" href="#"><span>blog</span></a></li>
<li><span><a title="contact" href="#">contact</a></span></li>
</ul>
[/code]

　　CSS

1.ul– 无规则列表

[code lang=”js”]
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
float: left;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 10px;
}

ul li a {
text-decoration: none;
float:left;
color: #999;
cursor: pointer;
font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
[/code]

　　我们需要将list-style的样式设置成none，因为没有任何列表内的图像。我使用了一个靠左的效果，因为我想使span和li标签靠左。我不打算为它定义一个宽度，因为这仅仅是一个示例而已。

4.– 鼠标悬停动作

[code lang=”js”]
ul.blue li a.current, ul.blue li a:hover {
background: url(images/blue.png) no-repeat top right;
color: #0d5f83;
}

ul.blue li a.current span, ul.blue li a:hover span {
background: url(images/blue.png) no-repeat top left;
}
[/code]

　　由于我们打算为鼠标悬停和活动链接设置相同的特效，这里我根据不同颜色，给出了另外四种颜色的示例效果。

　　兼容性，结论和下载

　　该代码在 IE6,7, Firefox 3.5.5, Safari和Google Chrome下通过了测试。通过这种非常实用的技术你可以在网页中重复使用同一张图片。它非常的实用，我希望你们能够理解我差劲的英文解释。如果有任何疑问都可以给我发邮件或者在下面给我留言。

　　本文翻译自《CSS Sliding Door using only 1 image》 原文作者：kailoon
　　原文地址：http://kailoon.com/css-sliding-door-using-only-1-image/