看到這一篇文章，想必你在學(xué)習(xí)CSS技術(shù)，CSS的含義你一定也不生疏：層疊樣式表。我們需要注重樣式的可層疊性。在以往的制作中，我們往往將導(dǎo)航菜單處理成直角的矩形，或者直接定義Border和Background的樣式即完成了菜單的制作。難道我們只能這樣了嗎。我們需要制作出更加美觀、實(shí)用、方便的菜單。

　　什么是滑動(dòng)門技術(shù)？究其本意，就是根據(jù)文本自適應(yīng)大小，進(jìn)行滑動(dòng)。我們可以用背景圖片來(lái)營(yíng)造這樣的現(xiàn)象，一個(gè)在左一個(gè)在右，把這兩個(gè)圖片想象成可以滑動(dòng)的門，當(dāng)文本較少的時(shí)候，兩個(gè)圖片重疊的就多些，當(dāng)文本較多的時(shí)候就滑動(dòng)開，重疊的部分就少一些。我們看下面的圖片示例。



　　在上在的圖示中，左邊的窄的門，遮住了右鏈的寬的門。我們主要想實(shí)現(xiàn)了是圖片的圓弧部份。中間的區(qū)域大小可以根據(jù)文本的多少來(lái)自適應(yīng)。假如文本少，側(cè)距離就近，相重疊就多。假如文本多就撐開了兩扇門，讓區(qū)域變大。大家應(yīng)該能理解這樣的思維。

　　我們用象處理軟件，制作了四個(gè)圖片，以備用：









　　下面我們來(lái)動(dòng)手制作這個(gè)滑動(dòng)門菜單，大家跟我一起做。假如有疑問，歡迎來(lái)我的主頁(yè)mb5u.com給我留言。

　　首先我們需要?jiǎng)?chuàng)建一個(gè)無(wú)序列表來(lái)放置菜單的內(nèi)容。xhtml代碼如下：


　　我們寫相應(yīng)的樣式，使菜單能初步成形。CSS代碼如下：


　　在上面的代碼中，我們首先設(shè)置容器woaicss的大小就外邊距、內(nèi)邊距。設(shè)置無(wú)序列表的上邊距為20PX，左邊距為18PX。并設(shè)置了列表標(biāo)記為無(wú)。
　　列表元素li為左浮動(dòng)，并設(shè)置了背景圖片，請(qǐng)注重背景圖片的對(duì)齊方式：無(wú)重復(fù)、居右、頂端對(duì)齊。
　　我們運(yùn)行一下看看效果，得到了如下圖所示的樣子。



　　菜單的鏈接文字距離左右邊距太近期了，滑動(dòng)門的另一扇（左側(cè)）還沒有定義。我們繼續(xù)后面的制作，在CSS文件中加入如下的代碼：


　　我們定義li的鏈接區(qū)為塊元素，設(shè)置背景圖片，請(qǐng)注重背景圖片的對(duì)齊方式：無(wú)重復(fù)、居左、頂端對(duì)齊。設(shè)置內(nèi)邊距：上下為零，左右為15PX。
　　我們運(yùn)行一下看看效果，得到了如下圖所示的樣子。



　　至此，滑動(dòng)門菜單的樣子已經(jīng)具備了，我們成功了實(shí)現(xiàn)了滑動(dòng)門菜單的制作，但我們的菜單還不夠美觀，鏈接文字需要定義，需要制作鏈接菜單的“當(dāng)前頁(yè)”的樣式。
　　我們繼續(xù)制作，CSS代碼如下：


　　鏈接文字進(jìn)行了定義，并設(shè)置了hover效果。
　　設(shè)置類dang的樣式。這是當(dāng)前頁(yè)的效果。背景圖片的定義與上面所討論的類似。

　　我們形成完整的代碼，運(yùn)行下面的代碼看最終的CSS滑動(dòng)門菜單制作：


　　滑動(dòng)門菜單的制作打破了一種方方正正矩形菜單的模式，讓我們的頁(yè)面設(shè)計(jì)可以更加的靈活方便，不必拘泥于代碼的局限，大家多做償試.