在我知道这项技术之前,我的导航栏中的每个按钮都是用的不同的图片。我发现这样的导航栏不仅对用户不够友好,而且需要更多的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/

阅读[2,616]|评论[1]
  1. 蘑菇说道:

    博主文笔很好啊,期待写出更好的文章,以后常来坐坐,学一下

发表您的观点

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭 嘿