CSS網頁版面入門教學13：下拉式及多層彈出式選單_基礎教學
- WBOY原創
- 2016-05-16 12:07:201391瀏覽
下拉及彈出式選單是網站設計中常用導航形式，這種選單形式能夠充分利用頁面現在空間隱藏與顯示更多內容，並能對內容進行合理的分類顯示，是一種非常優秀的導航形式。
早期的下拉或彈出式選單透過隱藏的layer或div來實現內容的隱藏，透過JavaScript腳本來回應使用者的操作，目前也採用JavaScript div或其它元素的形式來製作此類導航，不同的是整個導航都將使用符合標準的css佈局來打造，不再使用表格來製作選單，下拉式選單是上面提到的橫向導航與縱向導航的結合，而且透過css對於屬性的眾多支持，同一個選單不再需要多個div相互配合完成，使用css佈局來製作下拉式選單元，甚至可以直接控制ul或li元素，現在來嘗試一個最簡單的下拉式選單的製作，需要補充的是，下拉式選單的實作利用了許多JavaScript技術，這裡對JavaScript技術不作過多的語法上的綜合了解，只想透過現有的實例來告訴大家由於css元素屬性的靈活性，而使用製作網頁上的元素更加簡單方便。先看一下目前所設計的導覽的XHTML部分代碼：
-
文章
>
- CSS教學
- XML教學
- FLASH教學
-
參考
-
BLOG
- /a>
- 網頁技術
- FLASH技術
/li>
一個標準的採用ul結構的選單構成，但與前面所不同的是，這裡的程式碼結構涉及嵌套，在第一層的li之間插入了另一個ul的結構，這就是多層選單的一個程式碼構成模式，XHTML程式碼允許透過巢狀元素來實現想要的效果或是結構。下一步，我們嘗試寫一些簡單的css樣式讓選單變成所希望的橫向式：
ul { padding:0; margin:0; list-style:none;}
li { float :left; width:100px;}
第一步，對導航系統熱鬧鬧有ul元素進行基本設置，list-style:none屬性能夠幫助我們去除ul中的所有圓點標識。 list-style屬性擁有其它更豐富的使用方法，將在後面的列表元素中重點了解。
我們希望導航是橫向的通過對li設定float:left屬性，將所有的li向左浮動，形成了橫向的佈局，並嘗試使用每個li的寬度為100px，繼續編寫程式碼：
li ul { display:none; top:20px;}
li ul的定義在這裡所指的是所有li下面的ul元素，除了頂級的ul元素外，所有li下面定義的ul元素都會受到這部分樣式的定義。這裡使用top屬性設定了整個ul的上邊距，並使用display:none讓這部分被了起來。 css中的怕有元素基本上都可以使用display屬性來控制顯示還是隱藏。
li:hover ul,li.over ul { display:block;}
li:hover ul定義了li元素下的ul元素。透過逗號分隔，讓這兩種情況下都能使用display:block屬性，display:block屬性和display:none屬性剛好相反，一個是隱藏，一個是顯示，當設定為display:block時，不僅其指派的元素將顯示，而且還顯示成一個塊狀，如果不進行display:block時，元素只會按自己的內容在屏幕上佔有的區域進行顯示，而使用display:block時，元素將自己形成一個廣塊作為自己的點位符，這種設定對於做大按鈕來說是非常方便的。
在最下邊的預覽內程式碼你可以看到，裡邊加上了和段js程式碼，它是用來控制在IE瀏覽器下顯示下拉式選單的，本來li:hover ul這句話是可以的，但IE對css的支援還還完善，所以需要藉助JS來控制。
下面我們試著為下拉式選單增加一些樣式：
ul li a { display:block; font-size:12px; border:1px solid #ccc margin-top:2px; 3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}
css佈局對佈局的下拉式選單控制重點在於佈局的下拉式功能表控制重點在於佈局的下拉式功能表控制重點在於佈局的下拉式選單控製版面對佈局的下拉式選單控制元素的隱藏與顯示。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn