CSS 导航菜单

今天在网上找到一个非常不错的CSS导航菜单。它是通过改变背景图像位置实现鼠标划过图层变化的效果，菜单的大小可以自动调节（只要不超过背景图的大小），代码也十分简洁。我对图像做了修改（原图是弧形向上的，为了和我的页面设置搭配的更好，我把图垂直翻转了），并且增加了一个颜色（原来的设计只有静止和鼠标划过两种状态，我增加了一个菜单选择状态）。下面我对它的应用做些介绍：

1. HTML 代码：

<div id="main-tabs">                                      
   <ul>                                                    
       <li><a class="hot" href="/"><span>首页</span></a></li>  
       <li><a href="blog"><span>博客</span></a></li>           
   </ul>                                                   
</div>                                                    

2. CSS 代码：

#main-tabs {
  float:left;
  width:300px;
  height:25px;
  font-size:100%;
  line-height:normal;
}
#main-tabs ul {
margin:0;
padding:0px 10px 0 10px;
list-style:none;
}
#main-tabs li {
  display:inline;
  margin:0;
  padding:0;
}
#main-tabs a {
  float:left;
  background:url("/images/tabl3.gif") no-repeat left bottom;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
}
#main-tabs a span {
  float:left;
  display:block;
  background:url("/images/tabr3.gif") no-repeat right bottom;
  padding:5px 14px 4px 6px;
  color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#main-tabs a span {float:none;}
/* End IE5-Mac hack */
#main-tabs a:hover span {
  color:#FFF;
}
#main-tabs a:hover {
  background-position:0% -59px; /*42px - 25px +42 */
}
#main-tabs a:hover span {
  background-position:100% -59px;
}
  
#main-tabs a.hot {
  background-position:0% -17px; /*42px - 25px */
}
#main-tabs a.hot span {
  background-position:100% -17px;
}  

3. 因为整个菜单的实现是通过改变背景图像的位置（background-position), 所以我将对CSS里的背景位置做些介绍。对一个元素添加background-position的属性时，我们有两种方式可选择，一种是使用position（top center bottom left center right）来定位背景图像位置，而另一种方式则是使用lefgth（数值）来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。这个概念对刚刚接触背景位置的人来说或许比较抽象。 这里我教大家一种容易理解的办法。比如元素所在区域（通常指div）的高度为25px，如果没有指明background-position，那么背景图的左上角将和填充区域的左上角对齐（也就是‘background-position：0 0’ 或者‘background-position:left top’）。如果图像比区域大，那么多余的部分将不被显示。接下来，如果你要移动图像，规则是左负右正、上负下正。

比如以上的例子， 背景图高度是126px (三中不同颜色依次是红、蓝、绿), 每一种颜色高度为42px，但是DIV的高度只有25px。

• 禁止的状态：用绿色填充，‘background:url("/images/tabl3.gif") no-repeat left bottom;’ 就是把图片的左下角和区域的坐下角对齐。
• 鼠标滑过状态：用蓝色填充，‘background-position: 0% -59px’， 意思是我把图像先放在默认位置，就是左上角对齐位置，然后向上移动59px。为什是59px呢？因为红色区域高度为42px，我要显示蓝色，如果先上移42px，接下来，我要让蓝色的低端和区域的低端对齐，区域高25px，所以整个图要先上再移动42-25=17px，因此总共要上移59px。
• 菜单被选择的状态：用红色填充，同理图像要在默认位置上移17px。
• 背景图由两不同的图像文件组成（左边和右边），这么做是为了自动调节菜单的宽度。

4. 实例效果： 少儿上网导航

5. 参考： CSS菜单