11個優秀的HTML5 & CSS3下拉菜單制作教程

下拉菜單是一個很常見的效果，在網站設計中被廣泛使用。通過使用下拉菜單，設計者不僅可以在網站設計中營造出色的視覺吸引力，但也可以為網站提供了一個有效的導航方案。使用HTML5和CSS3可以更容易創造視覺上充滿吸引力的下拉菜單。

1、Stunning Menu in CSS3

效果很精美CSS3菜單，可以讓給你的網站提升一個層次。制作教程非常詳細。

在線演示

源碼下載

2、Click action Multi-level CSS3 Dropdown Menu

這是一個點擊彈出的下拉菜單，傳統的下拉菜單都是鼠標懸停的時候顯示，這個則是采用的單擊顯示。

在線演示

源碼下載

3、CSS3 Dropdown Menu

這是一個基於 CSS3 的兩級下拉菜單，當鼠標懸停在父元素的時候，子菜單會滑出。

在線演示

源碼下載

4、Multilevel CSS3 Metal Navigation with icons

基於 CSS3 的多層下拉菜單，金屬質感的菜單圖標。這也是一個基於 UL-LI 結構的菜單效果。

在線演示

源碼下載

5、CSS3 Dropdown Menu

這是一個滑出效果的下拉菜單，非常時尚。多彩的 Tab 讓整體感覺很漂亮。

在線演示

源碼下載

6、CSS Drop-Down Menu Framework

另一個基於 CSS 的下拉菜單框架，代碼簡潔干凈，對標准友好，易於使用。

在線演示

源碼下載

7、Drop-down Nav Menu With HTML5, CSS3 and JQuery

這個下拉菜單使用 CSS3、HTML5 和 jQuery 創建，實現一個易於使用，對用戶友好的導航菜單效果。

在線演示

源碼下載

8、CSS3 Dropdown Menu

這是一個有點類似 Mac 風格的下拉菜單，使用了 Border-radius, box-shadow 以及 text-shadow 等 CSS3 特效。

在線演示

源碼下載

9、Making a CSS3 Animated Menu

這是一個借助強大的 CSS3 動畫功能實現的CSS3動畫效果菜單。

在線演示

源碼下載

10、Kick-Butt CSS3 Mega Drop-Down Menu

這個下拉菜單效果常見於電子商務網站，因為能夠顯示大量的彈出內容。

在線演示

源碼下載

11、Mega menu with HTML5 and CSS3

這個也是基於 HTML5 & CSS3 制作的下拉菜單，菜單的內容可以自定義。

在線演示

源碼下載

本文固定鏈接: http://www.i7758.com/archives/1297.html