高级CSS技巧-Tab选项卡导航菜单

任何的tab导航，都可以采用下面的方式来实现。看一下下面的Tab menu效果。

 

 

我们需要准备tab左面背景和中右部背景图片（不过我个人偏向于把中间的背景和右边的背景分开，我认为那样可以实现中部背景循环，就算文字长一米也无所谓了，不过这太夸张了，考虑中国没有哪个菜单文字会超过6个字，英文也很少有太长的tab，所以两张图片完全够用了。）以及他们的鼠标悬停时的图片。采用图片的滑动门技术，因此把图片做成一张图，如下。

 

 

css代码和xhtml代码如下：

<style type="text/css">

/*- Menu Tabs--------------------------- */

    #tabs {
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }

显示tab菜单左侧
    #tabs a {
      float:left;
      background:url("tab.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

tab菜单中右侧
    #tabs a span {
      float:left;
      display:block;
      background:url("tab.gif") no-repeat right -96px;
      padding:5px 15px 4px 6px;
      color:#666;
      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */

鼠标悬停时的图片显示，采用滑动门技术给图片定好位就行了。
    #tabs a:hover span {
      background-position:100% -138px;
      color:#000;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }

</style>

<h2>Tab Menu</h2>
<div id="tabs">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>

通过这种方式，我们可以做各种自己喜欢的tab样式，只要变换一下图片就行了。