HTML5中利用“滑動門”技術(shù)制作精美導(dǎo)航

摘 要：網(wǎng)頁制作是中職學(xué)校電子商務(wù)、計算機網(wǎng)絡(luò)應(yīng)用等專業(yè)的必修課程，而網(wǎng)頁導(dǎo)航條的制作一直都是網(wǎng)頁制作課程的重點，方法種類繁多、效果各有不同。這里主要探討和研究利用最新的“滑動門”技術(shù)來制作精美的導(dǎo)航條效果，通過實際的案例為大家拋磚引玉，分析由網(wǎng)頁制作在HTML5+CSS3變革下衍生出的新的布局方法在導(dǎo)航條上的具體應(yīng)用。

關(guān)鍵詞：滑動門；HTML5+CSS3；網(wǎng)頁制作；導(dǎo)航條；水晶按鈕

中圖分類號：TP393.092

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，這門課程幾乎每年都在發(fā)生變化。如今，網(wǎng)頁制作方法已經(jīng)由原來的table嵌套式布局完全轉(zhuǎn)向了更加標(biāo)準(zhǔn)的HTML5+CSS3布局，這使網(wǎng)頁制作方法有了翻天覆地的變化，各種新方法、新技術(shù)如雨后春筍般不斷涌現(xiàn)?！盎瑒娱T”技術(shù)也在此時應(yīng)運而生，它可以僅僅使用一張圖片就完成各種寬度不同的圓角背景顯示，自適應(yīng)文字的寬度。這就大大減少了圖像的應(yīng)用和流量的浪費，加快了網(wǎng)頁的瀏覽速度。因此，“滑動門”技術(shù)成為目前比較流行的網(wǎng)頁制作方法之一，得到了廣泛的應(yīng)用。

那么，什么是“滑動門”技術(shù)呢？

當(dāng)在導(dǎo)航文字中設(shè)置鼠標(biāo)滑過時顯示圓角矩形框時，因為每個文字的長度不同，所以傳統(tǒng)的方法是給每個導(dǎo)航文字各繪制一個單獨長度的圓角矩形，每個導(dǎo)航顯示不同的圖像。這樣做不僅復(fù)雜，而且造成圖像使用多，訪問流量增加。因此，技術(shù)的更新時必要的，那就是使用“滑動門”技術(shù)來制作。

首先分析下滑動門技術(shù)的核心原理：在每個導(dǎo)航文字的兩邊各利用一個標(biāo)簽來設(shè)置同一張圓角矩形背景圖像，當(dāng)兩個相同的圓角矩形相向滑動時，它們會重疊一部分，當(dāng)中間文字區(qū)域較大時，重疊就少一些；而中間文字區(qū)域較小時，重疊就多一些。兩個圖像在文字兩邊滑動，重疊的部分的寬度會根據(jù)中間區(qū)域自動調(diào)整，而由于標(biāo)簽設(shè)置內(nèi)填充，所以兩邊的圓角始終顯示，圓角矩形就像兩扇推拉門一樣，因此這種技術(shù)被稱為“滑動門”。

分析了原理，通過一個實際案例詳細(xì)了解滑動門技術(shù)的具體應(yīng)用。那就是制作一個如圖1所示的鼠標(biāo)經(jīng)過時顯示圓角矩形的精美導(dǎo)航條效果。

圖1

為了表現(xiàn)出立體的視覺效果，以及水晶按鈕的質(zhì)感，制作中必須借助圖像才可以完成。分別使用如下圖2所示的4個圖像表現(xiàn)效果，其中nav_bg.png是作為整個導(dǎo)航的背景色平鋪使用的，nav_left.gif和nav_right.gif是導(dǎo)航整體兩側(cè)的圓角。nav_hover.png則是當(dāng)鼠標(biāo)指針經(jīng)過菜單項的時候顯示出來的。它在這里就充當(dāng)了滑動門的角色，只要在文字內(nèi)容兩邊設(shè)置標(biāo)簽作為“鉤子”把它“掛”起來就可以了。這里只使用這一張圖像來制作所有導(dǎo)航文字的滑過效果，不過有一點要注意，那就是這張圖片一定要比所有導(dǎo)航文字都要長，不能比任何導(dǎo)航文字短，而且最好要長至少1/3。

圖2

思路清楚了就可以制作了，由于導(dǎo)航左右各有圓角組成，所以先編寫相應(yīng)的HTML代碼。傳統(tǒng)的制作方法使用table的嵌套，可以使用1行5列的表格制作。但是，為了更好的適應(yīng)“滑動門”技術(shù)，這里使用HTML5+CSS3方法來做，這樣可以更好的精簡代碼，也是大勢所趨。具體代碼如下：

< nav>

• HOME
• NEWS
• ABOUT US
• SERVICES
• CONTACT

可以看出，每個文字鏈接都是作為一個列表項目

完成了頁面中的部分，下面用css樣式表控制頁面中的標(biāo)簽。

（1）設(shè)置導(dǎo)航條整體效果。導(dǎo)航條的整體效果由類樣式nav來控制，這里把左側(cè)圓角圖像設(shè)置為它的背景，左對齊、不重復(fù)，由于背景圖像寬為8像素、高為46像素，所以在左側(cè)設(shè)置8像素的填充，并把高度設(shè)置為46像素。導(dǎo)航的整體可以隨意設(shè)置寬度，這里設(shè)置為508像素，主要是為了方便計算，也可以不設(shè)置具體寬度，自適應(yīng)網(wǎng)頁的寬度。導(dǎo)航右側(cè)的圓角由類樣式.nav_right_bg來控制，方法和nav類似，就不再重復(fù)，具體代碼如下：

nav {

background-image： url（images/nav_left.gif）；

background-repeat： no-repeat；

background-position： left；

width： 508px；

height： 46px；

padding-left： 8px；

}

nav_right_bg {

background-image： url（images/nav_right.gif）；

background-repeat： no-repeat；

background-position： right；

height： 46px；

width： 500px；

padding-right： 8px；

}

（2）設(shè)置ul的樣式。ul標(biāo)簽是塊級元素，所以不設(shè)置寬度就會自動伸展到父系div兩端。在ul里平鋪背景，和左右兩個圓角圖片結(jié)合在一起。

nav ul {

background-image： url（images/nav_bg.png）；

margin： 0px；

padding： 0px；

list-style-type： none；

height： 46px；

}

這里設(shè)置了margin和padding，然后將list-style-type屬性設(shè)置為none，這樣可以取消掉每個列表項目前面自帶的圓點。然后設(shè)置高度為46像素，這正是背景圖片的高度。背景圖像最好為8像素寬，這樣不但能夠保證圖片大小比較小，也可以減輕服務(wù)器的原算量。

（3）設(shè)置ul中的li樣式。li也是塊級元素，默認(rèn)情況下是豎直排列，這里將其設(shè)置為左浮動，使各個列表橫向排列，形成橫向的導(dǎo)航菜單。代碼如下：

nav ul li {

float： left；

}

（4）設(shè)置a標(biāo)簽樣式。由于具體的顯示樣式都在a標(biāo)簽里設(shè)置，所以a標(biāo)簽需要設(shè)置的內(nèi)容較多。首先設(shè)置a標(biāo)簽為塊級元素，并在為a標(biāo)簽設(shè)置文本的顯示方式，設(shè)置字體顏色為白色、字號是12號字、字體為Arial。因為是英文，所以使用英文字體，如果導(dǎo)航時中文的，一般要設(shè)置為宋體或者黑體。設(shè)置行高line-height屬性和高h(yuǎn)eight屬性相同，都是46像素，是為了將文字在豎直方向上居中排列。設(shè)置text-decoration屬性為none，可以去掉鏈接文字自帶的下劃線。最后，給a標(biāo)簽設(shè)置左側(cè)15像素的內(nèi)邊距，用來顯示從左向右滑動的“滑動門”的左側(cè)圓角。具體代碼如下：

nav ul li a {

line-height：46px；

color： #FFF；

text-decoration： none；

display： block；

height： 46px；

padding-left： 15px；

font-weight： normal；

font-family： Arial；

font-size： 12px；

}

通過以上的設(shè)置，一個精美的圓角導(dǎo)航條效果已經(jīng)呈現(xiàn)在眼前了，但是此時鼠標(biāo)經(jīng)過并不會有效果顯示，以下通過設(shè)置a：hover屬性，設(shè)置鼠標(biāo)經(jīng)過的效果。

nav ul li a：hover {

color： #FF0；

background-image： url（images/nav_hover.png）；

}

這里將文字設(shè)置為黃色，然后將水晶質(zhì)感的圖像文件地址作為屬性的值，當(dāng)瀏覽頁面的時候，已經(jīng)可以看到當(dāng)鼠標(biāo)經(jīng)過的時候，背景圖像已經(jīng)出現(xiàn)，但是它的右邊被齊刷刷地切斷了，圖像并不能顯示完整。那這個問題如何解決呢？

這正是“滑動門”技術(shù)的重點所在。這里重點應(yīng)用到了前面HTML中設(shè)置的文字加粗標(biāo)簽，把標(biāo)簽作為一個“鉤子”來設(shè)置css樣式，可以為它的背景設(shè)置一個背景圖像，這個背景圖像仍然使用唯一的水晶材質(zhì)圖像文件nav_hover.png。不同的是這次把圖像對齊到右側(cè)，從右側(cè)展開，b標(biāo)簽?zāi)J(rèn)是內(nèi)嵌屬性，這里把它設(shè)置為塊。并且為了和上面a標(biāo)簽左側(cè)的15像素距離進(jìn)行對稱，在b標(biāo)簽的右側(cè)添加15像素的填充，這樣就可以使文字左右兩邊擁有相同的填充距離了。

nav ul li a b {

display： block；

padding-right： 15px；

}

之后為標(biāo)簽設(shè)置鼠標(biāo)經(jīng)過的效果，通過a：hover b來設(shè)置標(biāo)簽的鼠標(biāo)經(jīng)過效果。這一步雖然是一句代碼的變化，卻是在css應(yīng)用上的一個重要進(jìn)步，為標(biāo)簽設(shè)置背景圖片，這個圖片將會覆蓋在前面定義的“nav ul li a：hover”中設(shè)置的圖片的上面，這兩個圖片實際上是同一圖片，由于標(biāo)簽被包含在標(biāo)簽的內(nèi)部，標(biāo)簽在左側(cè)設(shè)置了15像素的填充，所以同一圖片相互覆蓋，左側(cè)又露出15像素的圓角，就像兩個滑動門一樣，互相重疊，而我們看到的部分又組合成一個完整圖片，顯示出完整的沒有間隙的圓角矩形。代碼如下：

nav ul li a：hover b {

color： #FF0；

background-image： url（images/nav_hover.png）；

background-repeat： no-repeat；

background-position： right top；

}

到此為止，在瀏覽器中的顯示效果就如圖（1）所示，制作了一個精美的水晶效果導(dǎo)航條，無論鼠標(biāo)經(jīng)過哪個導(dǎo)航文字，背景的圓角矩形都會自適應(yīng)的根據(jù)文字長度進(jìn)行變化。這充分展示了“滑動門”技術(shù)的優(yōu)越性——不僅實現(xiàn)了效果，而且精簡了圖像和代碼。

當(dāng)然，僅僅通過本案例并不能表現(xiàn)出“滑動門”技術(shù)全部的優(yōu)勢，在實際應(yīng)用中更可以根據(jù)這個案例衍生出如“雙重滑動門”的三狀態(tài)按鈕和“4圖像滑動門”制作圓角框等等嶄新的技術(shù)變化。這些都需要隨著時代的進(jìn)步在以后的發(fā)展中不斷的摸索和研究。技術(shù)發(fā)展無止境，但是目的永遠(yuǎn)只有一個，那就是更好的為實際需要服務(wù)。

參考文獻(xiàn)：

[1]溫謙.CSS設(shè)計徹底研究[M].北京：人民郵電出版社，2008.

[2]李燁.別具光芒 div+css網(wǎng)頁布局與美化[M].北京：人民郵電出版社，2006.

[3]北京阿博泰克北大青鳥信息技術(shù)有限公司 職業(yè)教育研究院.使用css+div制作網(wǎng)頁[M].北京：電子工業(yè)出版社.

作者簡介：劉宇（1983-），男，吉林長春人，講師，本科，雙學(xué)位，研究方向：網(wǎng)站開發(fā)。

作者單位：河源市高級技工學(xué)校，廣東河源 517000