快速业务通道

CSS实例教程:简单的的滑动导航栏效果

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-02

由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了。在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用。

今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:

 

思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果。

方法:在本例中,我们是通过调整各链接hover状态的背景图片位置来使其“看起来发生了改变”。(不明白?可以先了解“css sprites”)

首先,组织导航栏的html代码。

<ul>
 <li id="itemA"><a href="#">首页</a></li>
 <li id="itemB" class="select"><a class="urlB" href="#">原创</a></li>
 <li id="itemC"><a class="urlC" href="#">关于54173BLOG</a></li>
 <li id="itemD"><a class="urlD" href="#">网站建设</a></li>
</ul>
//a元素中仍然保留文字,这样可以保证用户在加载不到css文件的情况下仍能看到基本的内容。
//每个链接的背景都不同,需要单独定义,所以这里给每个链接一个类。
//li元素的id本例中没有用到,但在实际使用中,可以配合js来实现对当前页面的高亮显示。

其次,把导航栏的正常状态和hover状态做整体效果图并拼合在一张图片上。

 

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

 

最后,通过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; heig

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号