摘 要： 网页制作中导航条是一个重要的元素，讲述如何使用纯CSS，只使用两张图片，应用“滑动门（Sliding door technique）”的CSS技巧来制作一个简洁、漂亮的动感导航条。代码简洁，符合XHTML标准，通用性好，使用起来也很方便。
　　关键词： CSS；导航条；滑动门
　　中图分类号：TU528 文献标识码：A 文章编号：1671－7597（2011）1210069－01
　　如今Web Application横行，在Web 2.0网站的各种设计元素中，导航条是经常使用的一种设计元素。在这里，我们将制作一个动感的导航条，通过不同的背景图片实现图片交替效果。以前要实现本效果，一般使用JavaScript制作图片的替换效果，这种制作方法需要对每个栏目都制作两到四张图片，然后通过JavaScript来实现图片的交替显示，如果栏目修改了，则需要制作新的图片。现在，我们将应用“滑动门（Sliding door technique）”的CSS技巧，使用纯CSS和两张图片来制作一个简洁、漂亮的的导航栏。
　　1 制作背景图片
　　准备图片对于一个好的UI，一个很重要的方面就是要能及时的与用户发生交互。对于导航条按钮来说，我们需要让按钮响应各种鼠标事件，让用户知道它是可以按下的。因此，我们要制作的导航条按钮共有三种状态：正常状态、鼠标划过、鼠标按下。这里，我们利用CSS中的a:link，a:hover，a:active来实现这三种状态。
　　为了能够实现这种效果，我们需要准备三个状态的图片。利用CSS的background-position属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要利用“滑动门（Sliding door technique）”的CSS技巧，这种技术可以用来创建灵活的可扩展的按钮式导航。使用这个方法时，用一个大图像和一个侧边图像创建按钮。随着按钮中文本的扩展，大图像的更多部分露出来，较小的图像留在左边，盖住大图像的硬边缘。
　　
　　图1 导航栏的背景图切片
　　上图（图1）就是制作的两张背景图的切片效果图，左边的切片的宽度是固定的，右边图形切片的宽度应该比可能用到的最大值要宽，以方便适应不同栏目的文字。
　　2 应用列表制作导航层
　　在制作的时候，需要将链接分成两部分，分别设置两部分的背景图片，栏目的链接代码如下：
　　栏目
　　左边部分通过设置的背景图片实现，而右边部分则通过设置的背景图片实现，两个背景图案将合成一个图形按钮。因此制作时相应导航条栏目的HTML代码如下：