CSS執行個體教程:簡單的的滑動導覽列效果

來源:互聯網
上載者:User

文章簡介:CSS執行個體教程:簡單的的滑動導覽列效果.

由於網頁字型的限制,以及對導覽列美觀的需求,使用background-repeat來做一個簡單的文字導覽列已經遠遠不夠了。在很多場合,導覽列的背景是一個圖案,字型也不再是單調的宋體,這就需要我們把導覽列的整體效果做圖在網頁中使用。

今天我們就來做一個簡單的的滑動導覽列效果(不知道應該叫它什麼^_^),效果如下圖:

 

思路:通過改變連結滑鼠移至上方狀態(hover)的背景圖片,來達到把滑鼠放上去有高亮顯示的效果。

方法:在本例中,我們是通過調整各連結hover狀態的背景圖片位置來使其“看起來發生了改變”。(不明白?可以先瞭解“css sprites”)

首先,組織導覽列的html代碼。

<ul>
 <li id="itemA"><a href="#">首頁</a></li>
 <li id="itemB" class="select"><a class="urlB" href="#">原創</a></li>
 <li id="itemC"><a class="urlC" href="#">關於54173BLOG</a></li>
 <li id="itemD"><a class="urlD" href="#">網站建設</a></li>
</ul>
//a元素中仍然保留文字,這樣可以保證使用者在載入不到css檔案的情況下仍能看到基本的內容。
//每個連結的背景都不同,需要單獨定義,所以這裡給每個連結一個類。
//li元素的id本例中沒有用到,但在實際使用中,可以配合js來實現對當前頁面的高亮顯示。

其次,把導覽列的正常狀態和hover狀態做整體效果圖並拼合在一張圖片上。

 

做圖注意:兩種狀態下導覽列上的文字相對於背景圖案的位置要相同,否則會出現過渡效果不平滑,而相同的位置也便於我們在css中進行控制。(如本例,建議先做好一種效果,然後將其複製再修改顏色,這樣文字相對背景的位置就不會有錯了。)
另:如果連結間要留間距等,動手前就計算好,以便做圖一步到位。

 

最後,通過CSS調整樣式,實現最終效果。(查看示範頁面)

.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元素中的文字隱藏起來;為所有連結定義統一的背景圖片。*/
/*以下分別定義了4個連結的寬度和背景圖片位置。(本例中兩種狀態下文字在水平方向位置相同,在這裡每個連結兩種狀態的背景圖片就只有垂直位置不同了,這樣控制起來就更方便。)*/
.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兩個參數的順序:先水平,後垂直。“先左右,後上下”容易記錯。*/

至此,滑動導覽列製作完成。如需參考代碼請查看“示範頁面”的原始碼。

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

也許你有更好的方法,或發現本例中有錯誤,還請不吝賜教。
歡迎來54173BLOG交流更多CSS、HTML的相關知識。

54173BLOG原創文章,轉載請保留本文連結:http://www.54173.cn/blog/?p=255



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。