吳瑕

摘要：在網(wǎng)頁(yè)制作中，常常需要制作圓角框的菜單，通常的做法是將圓角框整體作為背景切片，然后分別將切下的圖片作為各個(gè)菜單項(xiàng)的背景，這樣做無(wú)法適應(yīng)不同寬度的菜單項(xiàng)。該文介紹采用一種“滑動(dòng)門”技術(shù)，制作可以適應(yīng)寬度變化的菜單項(xiàng)。

關(guān)鍵詞：滑動(dòng)門；CSS；圓角框

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）09-0183-02

在網(wǎng)頁(yè)制作中，常常需要制作圓角框的菜單，圖1就是一個(gè)網(wǎng)上書店的頂部菜單截圖。要制作這樣的圓角框菜單，通常的做法是將圓角框整體作為背景切片，然后分別將切下的圖片作為各個(gè)菜單項(xiàng)的背景。這樣做存在一個(gè)缺陷，即無(wú)法適應(yīng)不同寬度的菜單項(xiàng)，如果菜單項(xiàng)的文字長(zhǎng)度不同，就必須為每一個(gè)菜單項(xiàng)制作一個(gè)單獨(dú)的背景圖像， CSS也需要單獨(dú)設(shè)置，非常麻煩。本文將采用一種“滑動(dòng)門”技術(shù)，制作可以適應(yīng)寬度變化的菜單項(xiàng)。

圖1 菜單常態(tài)網(wǎng)頁(yè)截圖

圖2 鼠標(biāo)經(jīng)過(guò)“幫助中心”菜單項(xiàng)截圖

1采用“滑動(dòng)門”技術(shù)制作圓角框菜單

1.1準(zhǔn)備背景圖片

準(zhǔn)備兩個(gè)顏色深淺不一的背景圖片，淺色圖片是菜單常態(tài)下的背景，深色圖片是鼠標(biāo)經(jīng)過(guò)時(shí)的背景。背景圖像要做得寬一些，才能適應(yīng)較寬的菜單項(xiàng)。

1.2 編寫HTML代碼

接著編寫HTML代碼，為了實(shí)現(xiàn)適應(yīng)寬度變化的圓角框菜單，在每個(gè)菜單項(xiàng)的超鏈接文字外加上一對(duì)標(biāo)記，這是“滑動(dòng)門”的關(guān)鍵之處。

HTML 代碼如下：

• 幫助中心
• 帳號(hào)
• 購(gòu)物車

1.3 “滑動(dòng)門”技術(shù)工作原理

在每個(gè)菜單項(xiàng)中，為a元素與span元素都同時(shí)設(shè)置一個(gè)背景圖像，一個(gè)從左邊開始顯示背景，一個(gè)從右邊開始顯示背景，二者中間部分重疊，兩端點(diǎn)不重合，就可以分別顯示出兩端的圓角了。“滑動(dòng)門”方法示意圖如下所示：

圖3（a） a元素背景圖片示意圖

圖3（b） span元素背景圖片示意圖

圖3（c） 最終效果

1.4 CSS實(shí)現(xiàn)

按照上節(jié)的思路編寫CSS實(shí)現(xiàn)，代碼如下：

#topNavigation li{

float：left；

padding：0 2px }

#topNavigation a{ /*為a 元素設(shè)置背景*/

display：block； /*將a元素設(shè)置為塊級(jí)元素*/

line-height：20px；

background：transparent url（top-navi-white.png） no-repeat；

padding：0 0 0 14px； /*為a元素設(shè)置左邊的padding值，顯示左邊的圓角框背景*/ }

#topNavigation a span{ /*為span 元素設(shè)置背景*/

display：block； /*將span元素設(shè)置為塊級(jí)元素*/

background：transparent url（top-navi-white.png） no-repeat right；

/*span的背景圖片位置設(shè)置為靠右*/

padding：0 14px 0 0； /*為span元素設(shè)置右邊的padding值，顯示右邊的圓角框背景*/ }

1.5 鼠標(biāo)經(jīng)過(guò)菜單項(xiàng)的CSS設(shè)置

CSS設(shè)置到這里菜單的通常狀態(tài)已經(jīng)完成，接下來(lái)設(shè)置鼠標(biāo)經(jīng)過(guò)菜單項(xiàng)的樣式，效果如圖2所示。鼠標(biāo)經(jīng)過(guò)菜單項(xiàng)將使用深色背景圖片，同時(shí)改變文字顏色。CSS 代碼如下：

#topNavigation a：hover{ /*為a 元素設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)的背景*/

color：#FFF；

background：transparent url（top-navi-hover.png） no-repeat；}

#topNavigation a：hover span { /*為span元素設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)的背景*/

background：transparent url（top-navi-hover.png） no-repeat right；}

2 結(jié)束語(yǔ)

“滑動(dòng)門”技術(shù)解決了寬度不一的圓角框菜單項(xiàng)的制作問(wèn)題，使用該技術(shù)也可以實(shí)現(xiàn)適應(yīng)高度變化的菜單項(xiàng)，還可以如法炮制進(jìn)一步改進(jìn)，制作同時(shí)適應(yīng)高寬變化的圓角框。

參考文獻(xiàn)：

[1] 溫謙. 別具光芒CSS網(wǎng)頁(yè)布局案例剖析[M]. 北京： 人民郵電出版社， 2010.

[2] 袁磊， 陳偉衛(wèi). 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程[M]. 北京： 清華大學(xué)出版社， 2011.