網頁設計

關於網頁設計的技術或相關資訊分享

相容於IE的純CSS3下拉式選單

純CSS3 下拉式選單


上週和大家介紹了純CSS3製作的下拉式選單,不過由於IE沒有完整支援CSS 3 所以會有些狀況,今天來教大家如何讓IE也能正常地使用下拉式選單,當然效果就沒有能完整支援的這麼好了,不過還是能夠正常運行的。

DEMO範例

觀看範例(請用IE 及 IE以外的瀏覽器觀看,可以看得出差別,而IE8和IE9也會有些微差異)

語法說明

html部分,由於較舊的IE版本沒有完整支援CSS3的一些屬性,例如漸層效果gradient 、 IE8之前不支援圓角效果border-radius 文字陰影text-shadow 區塊陰影box-shadowcss transform...,所以我們使用之前提到的條件式註解,當瀏覽器是IE的時候讀取專屬的CSS,語法如下
<!--[if IE]>
<link rel="stylesheet" href="/styleie.css" />
<![endif]-->


html部分,一樣使用ul li建立選單結構

<ul id="nav">
 <li>
  <a href="#">選單1</a>
  <ul>
   <li><a href="#">子項目</a></li>
   <li><a href="#">子項目</a></li>
   <li><a href="#">子項目</a></li>
  </ul>
 </li>
 <li>
 <a href="#">選單2</a>
 <ul>
  <li><a href="#">子項目</a></li>
  <li><a href="#">子選單</a>
   <ul>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
   </ul>
  </li>
  <li>
   <a href="#">子選單</a>
   <ul>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
   </ul>
  </li>
  <li>
   <a href="#">子選單</a>
   <ul>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
    <li><a href="#">子項目</a></li>
   </ul>
  </li>
  <li><a href="#">子項目</a></li>
  </ul>
 </li>
</ul>


專屬IE的CSS的部分如下,其他的CSS就參照上一篇即可,這部分只是修正IE不支援。

#nav li a{
background:#ddd;
}

#nav li ul{
background:#dbdbdb;
display:none;
}

#nav li ul li a:hover{
background: #9ddcf5;
}


其實也不不一定要使用條件式註解,也可以直接使用CSS的特性中,後指定的屬性會蓋掉先指定的屬性,或者是使用css hack 也是可以達到相同的效果,這邊就看大家自己靈活運用,小編個人是比較喜歡載入專屬的CSS,比較方便維護。

Please enable the javascript to submit this form