CSS菜單：由CSS滑動(dòng)門(mén)技術(shù)實(shí)現(xiàn)的菜單十一款_DIV+CSS實(shí)例

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　CSS滑動(dòng)門(mén)技術(shù)開(kāi)辟了一種新的思維，以新的視角來(lái)構(gòu)建我們的CSS菜單，讓其能自適應(yīng)內(nèi)部文字的大小，可以自由的進(jìn)行滑動(dòng)，具有更高的兼容性。
　　我們可以應(yīng)用CSS滑動(dòng)門(mén)技術(shù)來(lái)構(gòu)建我們的CSS菜單，或許你對(duì)此并不是十分的熟悉，我們?cè)谶@里提供了十一款CSS滑動(dòng)門(mén)技術(shù)實(shí)現(xiàn)的CSS菜單，你可以將代碼進(jìn)行拆分、理解CSS滑動(dòng)門(mén)技術(shù)的內(nèi)涵。
　　假如你對(duì)滑動(dòng)門(mén)很生疏，請(qǐng)參考下面的兩篇文章：
　　CSS滑動(dòng)門(mén)菜單是什么意思如何實(shí)現(xiàn)？　

　　下面是CSS滑動(dòng)門(mén)技術(shù)實(shí)現(xiàn)的菜單十一款的效果圖：

　　我們不必每一個(gè)菜單都展開(kāi)，看第一個(gè)就可以了。其它的你可以自己分析一下。
　　看下面的XHTMl代碼：

示例代碼 [m.hl5o.cn]

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

　　這是一個(gè)非常普通的無(wú)序列表。也是我們菜單的根基，我們通過(guò)CSS對(duì)它進(jìn)行樣式定義，看下面的CSS代碼：

示例代碼 [m.hl5o.cn]

#tabs {
float:left;
width:100%;
background:#BBD9EE;
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;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
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 {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}