今天介紹的這款簡單非常簡單，利用一張背景圖片來實現(xiàn)菜單的懸停狀態(tài)。我們看下面的圖片：

僅這一張圖片，我們實現(xiàn)一個橫行CSS菜單。并設置它們的懸停效果。我們該如何做呢？看下面的圖片：
 
這是一個示意圖。最底層是ul，這是一個容器，我們將列表項li全部置入其中。為了方便說明，示意圖中僅畫了一個li。實際此例中有六個li，全部向左浮動，實現(xiàn)橫行排列。在li上面還有鏈接a標簽。

我們首先整理XHTML代碼：
Example Source Code


我們著手寫CSS前，先結合上面的示意圖整理一下思路：

1、首先需要讓ul居中，然后讓nav成為ul的背景圖片。這樣就可以簡化編碼，不必給每一個li或a再定義不同的背景圖片及其定位。
2、定義列表項li的寬度與高度，并向左浮動。實現(xiàn)列表項的橫向排列，組成一個橫向的菜單格局。
3、定義列表項內部的鏈接a元素為塊元素。并給a:hover一個背景圖片，但不給他任何定位信息。
4、根據(jù)nav1~nav6分別定義a:hover狀態(tài)下，背景圖片的定位。
5、利用padding移除鏈接a元素的文字。使得在CSS有效時文字不可見，若出現(xiàn)CSS加載失敗或其它設備瀏覽時，鏈接同樣有效。

我們開始著手CSS編寫：
Example Source Code


設置總體布局聲明，外邊距與內邊距均為零，文字大小為12px，列表項預調標記為無（去掉列表項前面的小黑點）。
設置ID為mini_nav的UL寬度與高度，上下邊距為50px，左右邊距為auto，實現(xiàn)水平居中對齊。設計背景圖片為nav.png，定位于：0 0。
設置UL中的LI的樣式，寬度與高度，向左浮動。
設置LI中鏈接A元素的樣式，首先將A元素轉換為塊元素，并設置其寬與高。
設置鏈接A元素的縣停樣式，定義背景圖片nav.png，重復方式為不重復，不給出背景圖片的定位信息。
此時我們可以看到的頁面效果如下：

 
但這時候還不能實現(xiàn)任何懸停交互效果，而且鏈接文字而位于我們的神覺范圍內。我們繼續(xù)編寫CSS代碼：
Example Source Code


這一段很相類，我們給不同的鏈接（即nav1~nav6）設置了鼠標懸停時的定位坐標。
我們給前面的LI中鏈接A元素增加以下代碼：
Example Source Code [www.52css.com]


上部的內邊距為40px。溢出為隱藏。我們將鏈接文字增加上部的內邊距，從而推到了下面，不可見的地方，為了使這樣的方法成功，我們必須設置溢出為隱藏。

最新評論