武林網(wǎng)(www.survivalescaperooms.com)文章簡介：CSS實例教程:簡單的的滑動導(dǎo)航欄效果.

由于網(wǎng)頁字體的限制，以及對導(dǎo)航欄美觀的需求，使用background-repeat來做一個簡單的文字導(dǎo)航欄已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。在很多場合，導(dǎo)航欄的背景是一個圖案，字體也不再是單調(diào)的宋體，這就需要我們把導(dǎo)航欄的整體效果做圖在網(wǎng)頁中使用。

今天我們就來做一個簡單的的滑動導(dǎo)航欄效果（不知道應(yīng)該叫它什么^_^），效果如下圖：

思路：通過改變鏈接鼠標(biāo)懸停狀態(tài)(hover)的背景圖片，來達(dá)到把鼠標(biāo)放上去有高亮顯示的效果。

方法：在本例中，我們是通過調(diào)整各鏈接hover狀態(tài)的背景圖片位置來使其“看起來發(fā)生了改變”。（不明白？可以先了解“css sprites”）

首先，組織導(dǎo)航欄的html代碼。

<ul>
 <li id="itemA"><a href="#">首頁</a></li>
 <li id="itemB" class="select"><a class="urlB" href="#">原創(chuàng)</a></li>
 <li id="itemC"><a class="urlC" href="#">關(guān)于54173BLOG</a></li>
 <li id="itemD"><a class="urlD" href="#">網(wǎng)站建設(shè)</a></li>
</ul>
//a元素中仍然保留文字，這樣可以保證用戶在加載不到css文件的情況下仍能看到基本的內(nèi)容。
//每個鏈接的背景都不同，需要單獨定義，所以這里給每個鏈接一個類。
//li元素的id本例中沒有用到，但在實際使用中，可以配合js來實現(xiàn)對當(dāng)前頁面的高亮顯示。

其次，把導(dǎo)航欄的正常狀態(tài)和hover狀態(tài)做整體效果圖并拼合在一張圖片上。

做圖注意：兩種狀態(tài)下導(dǎo)航欄上的文字相對于背景圖案的位置要相同，否則會出現(xiàn)過渡效果不平滑，而相同的位置也便于我們在css中進行控制。（如本例，建議先做好一種效果，然后將其復(fù)制再修改顏色，這樣文字相對背景的位置就不會有錯了。）
另：如果鏈接間要留間距等，動手前就計算好，以便做圖一步到位。

最后，通過CSS調(diào)整樣式，實現(xiàn)最終效果。（查看演示頁面）

.navbar {height:50px; padding-left:6px; overflow:hidden; background:url(01.jpg) no-repeat;}/*每個a元素都只能顯示自己范圍的背景，如果左右有空白、各元素有間距，需要為navbar定義背景圖片，否則空白、間距處看不到我們的圖片。*/
.navbar li {display:inline;}
.navbar li a {float:left; height:50px; text-indent:-9999px; background:url(01.jpg) no-repeat;}/*通過text-indent把a元素中的文字隱藏起來；為所有鏈接定義統(tǒng)一的背景圖片。*/
/*以下分別定義了4個鏈接的寬度和背景圖片位置。（本例中兩種狀態(tài)下文字在水平方向位置相同，在這里每個鏈接兩種狀態(tài)的背景圖片就只有垂直位置不同了，這樣控制起來就更方便。）*/
.navbar li a.urlA {width:78px; background-position:-6px 0;}
.navbar li a.urlA:hover,.navbar li.select a.urlA {background-position:-6px -50px;}
.navbar li a.urlB {width:75px; background-position:-84px 0;}
.navbar li a.urlB:hover,.navbar li.select a.urlB {background-position:-84px -50px;}
.navbar li a.urlC {width:211px; background-position:-159px 0;}
.navbar li a.urlC:hover,.navbar li.select a.urlC {background-position:-159px -50px;}
.navbar li a.urlD {width:126px; background-position:-370px 0;}
.navbar li a.urlD:hover,.navbar li.select a.urlD {background-position:-370px -50px;}
/*background-position兩個參數(shù)的順序：先水平，后垂直。“先左右，后上下”容易記錯。*/

至此，滑動導(dǎo)航欄制作完成。如需參考代碼請查看“演示頁面”的源代碼。

在本例中：
li元素和其中的a元素也可以通過其它方法控制位置；
li元素和a元素分別賦予了id和class，也許可以更簡單；
各鏈接的hover狀態(tài)背景圖片位置都不相同，均需單獨定義，也就是說你也可以把它們分開而不必總連在一起；
而如果把兩種狀態(tài)的圖片存成兩個圖片使用，代碼量也是差不多，css sprites的好處也無法體現(xiàn)。

也許你有更好的方法，或發(fā)現(xiàn)本例中有錯誤，還請不吝賜教。
歡迎來54173BLOG交流更多CSS、HTML的相關(guān)知識。

54173BLOG原創(chuàng)文章，轉(zhuǎn)載請保留本文鏈接：?p=255