DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 純CSS制作級聯菜單
純CSS制作級聯菜單
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:級聯菜單使用了純CSS的方式.

  • 參與測試的浏覽器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
  • 操作系統:Windows
  • 藍色理想經典論壇首發,轉載請注明出處

這次給項目做的級聯菜單使用了純CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。

早已有前輩完成過這樣的實例了,我以為我能順利完成,但沒想到處處碰壁,故記錄一點心得如下,供大家參閱。

廢話不多說,咚咚咚,開始制作啦!

除了IE6這個堅強的孩子,其他浏覽器攻克還是比較容易的。

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

該實例完成大概就兩個要點:

  1. 忌浮忌躁,一步步來,先把最低級的display:none;做。
  2. “:hover偽類”的使用,默認狀態“display:none;”,“:hover”時則“display:block;”則能很容易完成。

而IE6下折騰就比較復雜了,經過頭破血流的教訓之後,總結出關鍵四點

1. 原理:IE6僅<a>標簽支持:hover偽類,但如果a標簽裡面再嵌入a標簽,裡面的a標簽將不會生效,所以必須在之間套加一層<table>;

<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
內容部分可以含有<a>標簽
<!–[if IE 6]></td></tr></table></a><![endif]–>

2. 關鍵樣式名:這個用於:hover效果的a標簽的命名,如果使用與<li>一致的樣式名(在非IE6中是li:hover產生的效果),將不用再另寫樣式代碼,不僅節省了代碼開銷,而且可維性更好;(這個是省時省力的關鍵)

<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td>
<![endif]–>
內容部分可以含有<a>標簽
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>

3. visibility的使用:采用display的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況

.c_subNav .li:hover ul { visibility:visible;}

4.table的設置: [含淚ing]table一定要記得width:100%;啊,一定要記得啊,一定要記得啊,一定要記得啊。

最後完成效果:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved