采用“滑動門”技術(shù)制作適應(yīng)寬度變化的圓角框菜單

吳瑕

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

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

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

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

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

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

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

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

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

1.2 編寫HTML代碼

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

HTML 代碼如下：

• 幫助中心
• 帳號
• 購物車

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

在每個菜單項中，為a元素與span元素都同時設(shè)置一個背景圖像，一個從左邊開始顯示背景，一個從右邊開始顯示背景，二者中間部分重疊，兩端點不重合，就可以分別顯示出兩端的圓角了?！盎瑒娱T”方法示意圖如下所示：

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

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

圖3（c） 最終效果

1.4 CSS實現(xiàn)

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

#topNavigation li{

float：left；

padding：0 2px }

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

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

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è)置為塊級元素*/

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)過菜單項的CSS設(shè)置

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

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

color：#FFF；

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

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

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

2 結(jié)束語

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

參考文獻(xiàn)：

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

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