面包屑(Breadcrumb)导航条

演示和代码

经常访问我网站的朋友一定注意到我更新了网站的导航条。上次的更新是在去年十月份，具体的介绍请看这篇文章日志模板更新。虽然上次更新的时候觉得旧款的导航条还挺漂亮的，但是时间一长我就开始厌烦了。特别是两个星期前，我在网上看到这款苹果风格的面包屑导航条，就深深地爱上了它。今天终于有空把它搬到了自己的网站上。

总的来讲，这款导航条还是比较容易整合到网站上。主要碰到的问题还是浏览器的兼容性问题。原创的版本在IE6下根本是不能用的，可是在访问我网站的朋友里，大约有三分之一还在使用IE6，因此就算我不情愿，我也要把它修改成和IE6兼容。其实在这次IE6下最大的问题是：原创版本用PNG做背景，所以在IE6下原本透明的PNG背景被加上了一层淡淡的蓝色。关于IE6的PNG不透明问题在网上讨论的很多，我尝试过其中一种使用javascript的解决方法，但是效果很差，因此我干脆使用photshop把PNG转换成GIF，虽然转换后的背景图边缘不如PNG的平滑，但是整体效果还行，基本上看不出有什么区别。另外一个问题：在IE6/IE7浏览器里中文导航字在垂直方向不会居中，我没有找到更好的办法，只好给IE特别写了一行CSS样式代码。此外，我还加入了搜索栏，但是碰到类似问题：搜索栏在IE6下垂直方向不居中，因此又给IE6写了一行CSS。最终的效果图如上，如果你非常挑剔，那么你可能还注意到，那个搜索图标在垂直方向稍微有点偏上，这回是Firefox的问题了，它在IE里显示正常。不管了，总之我已经挺满意。希望这回不要过早的喜新厌旧。:-) 下面要介绍如何制作这款导航条。

1.HTML代码：

<ul id="breadcrumb">
  <li><a href="/"><img src="home_blk.gif" alt="Home" class="home" /></a></li>
  <li><a href="/blog" class="chinese">博客</a></li>
  <li><a href="/blog/categories" class="chinese">日志分类</a></li>
  <li><a href="/blog/categories/jquery.html">jQuery</a></li>
  <li><a href="http://feed.feedsky.com/61dev" target="_blank" title="订阅本日志"><img src="rss.gif" alt="订阅本日志" class="home" /></a></li>         
  <li>Search Result</li>        
  <li style="float:right;">          
    <form action="http://www.61dh.com/search" id="cse-search-box">
      <div>
       <input type="hidden" name="cx" value="partner-pub-8060693734982386:qvg7d0-myh2" />
       <input type="hidden" name="cof" value="FORID:11" /> 
       <input type="hidden" name="ie" value="UTF-8" /> 
       <input type="text" name="q" size="31" /> 
       <input class="srch" src="search.gif" type="image"> 
      </div> 
     </form> 
     <script type="text/javascript" src="http://www.google.cn/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>               
    </li>
</ul>

上面的HTML代码没什么特别之处，只是些HTML列表(list)而已。值得注意的是: 当列表内容是图片，使用了CLASS ('home')；当列表内容是中文，使用CLASS ('chinese')。此外，因为搜索栏是靠右的，所以其列表使用了CSS 'float:right'。

2. CSS代码

<style type="text/css">
body{font: 12px Arial, Helvetica, sans-serif;}
h1{font-size:22px;}
#breadcrumb{
    background-image:url('bc_bg.gif'); 
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}
#breadcrumb a{
    height:30px;
    display:inline;
    float:left;
    background-image:url('bc_separator.gif'); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}
#breadcrumb a:hover{color:#35acc5;}
.home{border:none;margin: 8px 0px;}
.srch{display:inline; padding:5px 10px 0 0;}
</style>
 <!--[if lt IE 7]>
   <style type="text/css">
     .srch{display:inline; padding:7px 10px 0 0;}
   </style>
<![endif]-->
<!--[if IE]>
   <style type="text/css">
     .chinese{ margin-top:2px;}
   </style>
<![endif]--> 

在原版的CSS上，我给#breadcrumb a, 加入了float:left，这解决了导航条在IE6下的显示问题，另外使用GIF替代PNG，还有一些小调整。最后要提醒注意的是：我给IE6和IE专门定制了CSS，用来解决本文开头提到的浏览器兼容问题。

演示和代码