CSS实现滑动导航栏效果

人们对于网页的效果要求越来越高了，醒目的导航栏仅仅使用background-repeat来做一个简单的文字导航栏已经远远不够了。在很多场合，导航栏的背景是一个图案，字体也不再是单调的宋体，这就需要我们把导航栏的整体效果做图在网页中使用。

今天我们就来做一个简单的的滑动导航栏效果，效果如下图：

最后，通过CSS调整样式，实现最终效果。

.navbar {height:50px; padding-left:6px; overflow:hidden; background:url(01.jpg) no-repeat;}/*每个a元素都只能显示自己范围的背景，如果左右有空白、各元素有间距，需要为navbar定义背景图片，否则空白、间距处看不到我们的图片。*/
.navbar li {display:inline;}
.navbar li a {float:left; height:50px; text-indent:-9999px; background:url(01.jpg) no-repeat;}/*通过text-indent把a元素中的文字隐藏起来；为所有链接定义统一的背景图片。*/
/*以下分别定义了4个链接的宽度和背景图片位置。（本例中两种状态下文字在水平方向位置相同，在这里每个链接两种状态的背景图片就只有垂直位置不同了，这样控制起来就更方便。）*/
.navbar li a.urlA {width:78px; background-position:-6px 0;}
.navbar li a.urlA:hover,.navbar li.select a.urlA {background-position:-6px -50px;}
.navbar li a.urlB {width:75px; background-position:-84px 0;}
.navbar li a.urlB:hover,.navbar li.select a.urlB {background-position:-84px -50px;}
.navbar li a.urlC {width:211px; background-position:-159px 0;}
.navbar li a.urlC:hover,.navbar li.select a.urlC {background-position:-159px -50px;}
.navbar li a.urlD {width:126px; background-position:-370px 0;}
.navbar li a.urlD:hover,.navbar li.select a.urlD {background-position:-370px -50px;}
/*background-position两个参数的顺序：先水平，后垂直。“先左右，后上下”容易记错。*/

至此，滑动导航栏制作完成。

在本例中：
li元素和其中的a元素也可以通过其它方法控制位置；
li元素和a元素分别赋予了id和class，也许可以更简单；
各链接的hover状态背景图片位置都不相同，均需单独定义，也就是说你也可以把它们分开而不必总连在一起；
而如果把两种状态的图片存成两个图片使用，代码量也是差不多，css sprites的好处也无法体现。