其中有個人說"如果你是高手,那你就詳細介紹一下css滑動門技術",這句話把我刺激了,於是我連夜從網上搜羅了一些關於css滑動門技術的東西,並且自己做了一個滑動門,事實上在學習css滑動門技術之前,我發現我已經做過很多類似的菜單效果,最有代表性的就是搜狗網址導航的搜索框,後來這個效果被廣泛運用到搜狗的搜索引擎當中,我在這裡總結一下一些css滑動門的知識,希望能給大家對CSS的學習起到一個幫助作用,另外結合Javascript,CSS可以制作出更多炫目的效果.
背景:
從我的理解來講,css滑動門是被刺激出來的,因為很多人認為css並不能做出漂亮的網頁,但是事實上恰恰相反,CSS不僅能做出相當漂亮的網頁,還可以很好得把內容和表現分開,給設計師和開發人員更大的空間去發揮;
定義:
滑動門技術就是:當點擊頁面上的導航按鈕後這個導航按鈕的CSS特性發生變化，從而區別於該組的其他導航按鈕，提示給操作者，當前浏覽的內容就是這個CSS特性發生變化的按鈕所指向的內容。這種效果的一大好處在於，在多導航的頁面上能夠清晰地反映當前浏覽內容隸屬於哪個欄目或者哪個類，同時給人以美觀、清晰、明了的視覺感受。滑動門技術的主角是被操作的對象，也就是這裡被點擊的對象，其CSS特性主要是指該導航按鈕包括其中的其它元素的屬性發生變化，當然，這個按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大小、粗細以及外間距和內間距等等，總之，其一切可以把自身的“地位”區別於其它屬主的屬性都可以被應用起來使用在滑動門技術上。
應用范圍:
網站導航菜單
技術要點:
1.用無序列表ul和li組成菜單結構
2.給li設置背景(如果有圓角,則設置為右置或左置,背景圖片遠遠超過該子菜單的長度)
3.設置li中的a的display為block,並給a加背景屬性(如果有圓角,則設置為右置或左置,背景圖片只要是一個圓角的寬度就可以了)
4.設置當前菜單a的屬性(padding-bottom加n個像素,覆蓋整個菜單的底邊,n根據具體效果決定)
5.用JS控制鼠標點擊以後的效果(先來一個循環把所有的按鈕背景重置,然後把改變當前按鈕樣式)
出自csdn