2009/02/09

展開式選單 第一頁

此練習試作一個可展開與隱藏的選單。此練習只用到 CSS,你也可以用 javascript 作 展開式選單,其顯示效果不同,可以依需要選用最適合的方法。此練習使用的元素與特徵有:

  1. DIV:容納文字與元素的容器。
  2. UL:建立一個沒有編號的清單。
  3. height:設定元素矩格的高度。初值設為 30px。
  4. overflow:auto:內容超出元素矩格範圍時的風格表。
  5. :hover:滑鼠游標在元素上移動時的風格表。
  • 上例,IE6 失敗,IE6 不支援一般元素用 :hover;Firefox, Safari, Chrome 都成功。

使用 white-space 製作一個展開式選單。前面的練習用改變高度的方法,製作展開式選單。下面的練習改用 white-space:nowrap 與 white-space:pre 製作展開式選單。兩者的顯示效果有差異。

  • 上例,IE6 失敗;Firefox, Safari, Chrome 都成功。
展開式選單(你正在看 第一頁) : 第一頁 第二頁