jQuery 是一款非常實用的 JavaScript 框架,基於 jQuery 開發的菜單插件也非常多,包括下拉菜單、Tab 菜單等。

另外,HTML5 的應用,讓這些菜單在視覺效果和交互能力上又提高了很多。本文就推薦了 7 款炫酷而實用的 jQuery/HTML5 菜單,希望對你有所幫助。

  • CSS3 扇形動畫菜單鼠標滑過扇形展開動畫

這款 CSS3 菜單很有個性,是一個扇形的多級下拉菜單,當你將鼠標滑過菜單時,菜單項即可展開。

css3-sector-menu

  • CSS3 3D 旋轉下拉菜單

這款菜單也是基於 HTML5 和 CSS3 的,儘管看上去是平面菜單,但是二級菜單下拉後會給你 3D 的視覺效果,並且菜單在展開時是旋轉的,效果很棒。

jquery-3d-rotate-dropdown-menu

  • jQuery/CSS3 實現超酷的動畫 Tab 菜單

這款菜單是基於 jQuery 的,同時也是一款 Tab 菜單,這款 jQuery Tab 菜單的外觀相對比較清新簡易,並且在 Tab 切換時出現飛入飛出的動畫效果。

jquery-css3-tab-animate-menu

  • jQuery 二級下拉菜單

這款 jQuery 菜單的外觀是紅色的,看上去非常溫暖,菜單的整體看上去非常簡單,但是卻相當實用,你可以試試。

jquery-2-dropdown-menu

  • CSS3 帶小圖標垂直下拉菜單

這是一款垂直的手風琴樣式菜單,每一個菜單項都可以定義相應的小圖標,同時你也可以自定義菜單的寬度。

css3-dropdown-menu-icon

  • jQuery/CSS3 帶錶單的下拉菜單

這款 jQuery 菜單的特點是菜單下拉項內容可以自定義,可以使文字、表單等。另外木質外觀的樣式看上去非常不錯。

jquery-css3-form-menu

在線演示源碼下載

  • CSS3 簡易清新的下拉菜單

這是一款相對比較簡易的 CSS3 下拉菜單,簡單的顏色搭配讓這款菜單看上去也還不錯。

css3-simple-dropdown-menu

這些 jQuery/HTML5 菜單插件應該都比較實用,而且形式豐富,推薦各位可以使用一下。

(本文轉載自合作夥伴《碼農網》;譯者:小峰;圖片來源:Peter Hellberg,CC Licensed)