Jan.15.2015

想做網站 ? 先從這七款實用 jQuery / HTML5 設計開始吧

3777750788_16272d18dd_z

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

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

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

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

964a516dbd2b13570a84a2082fd3d4ab

  • CSS3 3D 旋轉下拉菜單

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

2488f7809905aac5b6c1f519bc67fb83

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

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

a685ff40703fb6841debd27f45aae2d0

  • jQuery 二級下拉菜單

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

6e6c476a68add2d56a90f741e7133a4c

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

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

a7e1dc6d8ba9dc95cb768955a1adf1a0

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

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

5d82f6b0df68635bbe1b7ef3991a7a04

在線演示源碼下載

  • CSS3 簡易清新的下拉菜單

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

e26c8f144df749273893c59e535bf55a

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

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

不可轉載
TechOrange 科技報橘
《TechOrange》,專門追蹤全球網路產業的科技網誌。提供網路創業者、行銷人員、媒體人員關於網路的資訊與知識是我們的任務;每天大概花吃顆橘子的時間來瀏覽就夠,吸收科技新知沒負擔。
《TechOrange》,專門追蹤全球網路產業的科技網誌。提供網路創業者、行銷人員、媒體人員關於網路的資訊與知識是我們的任務;每天大概花吃顆橘子的時間來瀏覽就夠,吸收科技新知沒負擔。

更多文章


READ MORE

更多文章

READ MORE

LOGIN

SIGN UP

FORGOT
PASSWORD

請輸入你的帳號或電子郵件位址。你將收到含有建立新密碼鏈結的電子郵件。