使用background-repeat来做一个简单的文字导航栏

由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了 。在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用 。
今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:

使用background-repeat来做一个简单的文字导航栏

文章插图
思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果 。
方法:在本例中,我们是通过调整各链接hover状态的背景图片位置来使其“看起来发生了改变” 。(不明白?可以先了解“css sprites”)
首先,组织导航栏的html代码 。

  • 首页

  • 原创

  • 关于54173BLOG

  • 网站建设


//a元素中仍然保留文字,这样可以保证用户在加载不到css文件的情况下仍能看到基本的内容 。
//每个链接的背景都不同,需要单独定义,所以这里给每个链接一个类 。
//li元素的id本例中没有用到,但在实际使用中,可以配合js来实现对当前页面的高亮显示 。
其次,把导航栏的正常状态和hover状态做整体效果图并拼合在一张图片上 。
使用background-repeat来做一个简单的文字导航栏

文章插图
做图注意:两种状态下导航栏上的文字相对于背景图案的位置要相同,否则会出现过渡效果不平滑,而相同的位置也便于我们在css中进行控制 。(如本例,建议先做好一种效果,然后将其复制再修改颜色,这样文字相对背景的位置就不会有错了 。)
另:如果链接间要留间距等,动手前就计算好,以便做图一步到位 。
使用background-repeat来做一个简单的文字导航栏

文章插图
最后,通过CSS调整样式,实现最终效果 。(查看演示页面)
【使用background-repeat来做一个简单的文字导航栏】.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状态背景图片位置都不相同,均需单独定义,也就是说你也可以把它们分开而不必总连在一起;

推荐阅读