CSS滑動門菜單是什么意思如何實現？_Div+CSS教程

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

　　什么是滑動門技術？究其本意，就是根據文本自適應大小，進行滑動。我們可以用背景圖片來營造這樣的現象，一個在左一個在右，把這兩個圖片想象成可以滑動的門，當文本較少的時候，兩個圖片重疊的就多些，當文本較多的時候就滑動開，重疊的部分就少一些。我們看下面的圖片示例。



　　在上在的圖示中，左邊的窄的門，遮住了右鏈的寬的門。我們主要想實現了是圖片的圓弧部份。中間的區域大小可以根據文本的多少來自適應。假如文本少，側距離就近，相重疊就多。假如文本多就撐開了兩扇門，讓區域變大。大家應該能理解這樣的思維。

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









　　下面我們來動手制作這個滑動門菜單，大家跟我一起做。假如有疑問，歡迎來我的主頁mb5u.com給我留言。

　　首先我們需要創建一個無序列表來放置菜單的內容。xhtml代碼如下：


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


　　在上面的代碼中，我們首先設置容器woaicss的大小就外邊距、內邊距。設置無序列表的上邊距為20PX，左邊距為18PX。并設置了列表標記為無。
　　列表元素li為左浮動，并設置了背景圖片，請注重背景圖片的對齊方式：無重復、居右、頂端對齊。
　　我們運行一下看看效果，得到了如下圖所示的樣子。



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


　　我們定義li的鏈接區為塊元素，設置背景圖片，請注重背景圖片的對齊方式：無重復、居左、頂端對齊。設置內邊距：上下為零，左右為15PX。
　　我們運行一下看看效果，得到了如下圖所示的樣子。



　　至此，滑動門菜單的樣子已經具備了，我們成功了實現了滑動門菜單的制作，但我們的菜單還不夠美觀，鏈接文字需要定義，需要制作鏈接菜單的“當前頁”的樣式。
　　我們繼續制作，CSS代碼如下：


　　鏈接文字進行了定義，并設置了hover效果。
　　設置類dang的樣式。這是當前頁的效果。背景圖片的定義與上面所討論的類似。

　　我們形成完整的代碼，運行下面的代碼看最終的CSS滑動門菜單制作：


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