任何的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样式,只要变换一下图片就行了。