二月 10

雖然可以用 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

加入這篇文章到書籤網站或寄給朋友分享
Entry End
文章引用網址:
http://article.denniswave.com/3571/trackback

yarpp_ralated_post 相關文章 yarpp_ralated_post

迴響 (3) Facebook 迴響 引用 (0)
  1. 你好
    請問你連結裡那個demo下拉式程式碼可以直接拿來使用嗎?

    • 可以啊~作者最後有註明可以取用... ;-)

  2. 這樣的做法不錯,不過我有個更好的方式,使用純css下拉選單,完全沒有使用到javascript,可以參考一下。

    「純 CSS」CSS 下拉式選單-CSS多層級menu、純CSS、menu下拉式

    Demo

    UCMIC

  3. 請問CSS&HTML 都複製下來後 為何 載入不了CSS


發表迴響


還沒有人引用這篇文章。


文章引用網址:
http://article.denniswave.com/3571/trackback

Valid XHTML 1.1 Valid CSS3! CC:by-nc-sa_2.5 anti_IE

關閉