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

僅這一張圖片，我們實(shí)現(xiàn)一個(gè)橫行CSS菜單。并設(shè)置它們的懸停效果。我們?cè)撊绾巫瞿?？看下面的圖片：
 
這是一個(gè)示意圖。最底層是ul，這是一個(gè)容器，我們將列表項(xiàng)li全部置入其中。為了方便說明，示意圖中僅畫了一個(gè)li。實(shí)際此例中有六個(gè)li，全部向左浮動(dòng)，實(shí)現(xiàn)橫行排列。在li上面還有鏈接a標(biāo)簽。

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


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

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

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


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

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


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


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

最新評(píng)論