純 CSS 做出多層選單

雖然可以用 java script 做出多層選單,可是我比較喜歡用純 CSS 來做。一是由於我不太喜歡放太多 script 在網頁裡面,另外一個理由則是,要更換顏色樣式的話,CSS 方便多了:good。(對了,如果你的網頁選擇要給 IE 看的話,就只能選 java 囉)
參考這裡有垂直和水平的選單給你選。這一頁是放在網頁的程式碼,在 menu example 裡面則有需要的 css 檔案。
From:http://qrayg.com/learn/code/cssmenus/

HTML 程式碼:

<ul id="navmenu-h">
<li><a href="#">Root nav item</a>
     <ul>
     <li><a href="#">Sub nav item</a></li>
     </ul>
</li>
</ul>

上面可以看出來,是用無序序列(ul、li)來做出來的。由於正常的序列都會有編號符號(無序序列是符號,有序的則是1234),所以需要在 CSS 裡面設定 list-style(因為你不會希望在選單上有圓點的符號吧)。再來就是利用 display block 的方式,在滑鼠滑到選單上的時候,顯示下一層的選單(因為用的是 hover 的方式,所以 IE 就看不到囉)。這樣就好囉。雖然預設的 CSS 是四層的,不過你要改成幾層也可以啦。
範例連結:這裡是垂直跟水平選單的示範。示範的下面則有不同選單的 CSS 和 java script 的原始碼。
Mirror:
水平選單:CSSjava
垂直選單:CSSjava

Please follow and like us:

4 comments on “純 CSS 做出多層選單

Leon 發表迴響 取消回覆

你的電子郵件位址並不會被公開。 必要欄位標記為 *