35個優秀的jQuery和CSS3導航選單

enqoo發表於2013-01-05

  導航是網頁設計的最重要因素之一。優秀的導航必須兼具美觀和實用性。

  jQuery和CSS3的資訊,你可以很容易地為您的網站導航創造完美功能和定製水平。然而,如果你不熟悉這些,它會變得很困難。幸運的是,人們已經為你寫好了程式碼。

  本綜述中,我們已經準備了35個新鮮(其中大多數是從2012年開始)美麗並且馬上可用的jQuery和CSS3的導航選單。您需要做的只是為您的特定需求來利用它們!

 

  35優秀的jQuery和CSS3的導航選單:

  1. jMenu

  JMenu的是一個jQuery外掛,使我們能夠創造無限的子選單橫向導航。除了jQuery的,它也需要jQuery的使用者介面,並支援這個庫的所有效果(如淡入或slideDown)。選單中的標記很乾淨,因為它使用巢狀列表。

  2. Ascensor

  ascensor是一個jQuery外掛,它旨在培養和適應的內容,根據電梯系統。

  3. jQuery Dropdown Login Form

  一個簡單的jQuery下拉登入形式,很容易實現。

  4. HorizontalNav

  HorizontalNav 是一個jQuery外掛,跨越橫向導航,以適應全寬。如果你曾經建立這種效果,你就會知道這是很煩人的。這個外掛很容易上手,即使你已經建立了一個效果。

  5. jQuery Navigation Plugin

  一個簡單的jQuery導航外掛  “淡出”和“幻燈片”:有兩個可能影響至今。

  6. Automatic Ajax jQuery Navigation

  AJAX導航 的jQuery外掛的目標是自動轉換成Ajax呼叫的定期聯絡,顯示連結點選位址列,改善使用者體驗感受,使onload和onunload每一頁的功能導航有更多的過渡。

  7. Kwicks Extended Navigation

  kwicks  jQuery的開始做一個Mootools的效果,但現在已經演變成一個高度可定製和通用的部件。

  8. CasperJS

  CasperJS 是一個開源導航指令碼和JavaScript編寫基礎上PhantomJS -編寫指令碼的無頭WebKit引擎的測試工具。它簡化了一個完整的導航方案的過程,提供了高層次的功能,方法和執行常見任務的語法。

  9. Bootstrap Image Gallery

  引導圖片廊 是Twitter的引導工具箱狀態對話方塊的擴充套件,緩解了一套畫廊影象之間的導航。它具有滑鼠和鍵盤導航,過渡效果,全屏模式和幻燈片功能。

  10. Flipboard Layout

  Flipboard的佈局 是一個實驗性的頁面佈局,讓你瀏覽網頁。

  11. TinyNav

  TinyNav.js 是一個微小的jQuery外掛(362位元組縮小的gzip壓縮)轉換<ul>和<OL>小螢幕選擇下拉選單的導航。它還可以自動選擇當前頁,並增加了“選擇”,該專案。

  12. stack.js

  stack.js 是一個直觀的,基於滾動導航演示庫。

  13. flexnav

  14. jQuery Keyboard Navigation Plugin

  jQuery的鍵盤導航外掛 提供了通過鍵盤進行導航和啟用,是上,下,左,右箭頭鍵。

  15. Menutron

 

  menutron 是為響應導航選單的jQuery外掛。

  16. jlnav

  17. Simple Responsive jQuery Navigation

  一個框架,是既小又簡單易用,  反應(多級)導航的jQuery外掛 。

  18. Scrollpath

  scrollpath 是一個自定義的滾動路徑外掛。它使用帆布味語法來繪製線條和圓弧。

  19. filtrify

  filtrify 是一種先進的標籤過濾外掛,選出多個選擇功能和歐曼克拉克的垂直導航選單啟發。相關標籤的專案數量上得到現場反饋。

  20. Curtain.js

  21. PageSlide

  PageSlide 是一個jQuery外掛幻燈片網頁上揭示了一個額外的互動窗格。

  22. Smooth Div Scroll

  水平滾動的內容向左或向右是一個簡單的jQuery外掛。

  23. HTML5/CSS3 Gray Navigation Menu

  一個簡單的HTML5和CSS3的導航選單 。

  24. Responsive CSS Navigation Menu

  這個反應的CSS導航選單 使用了媒體查詢,實現了流暢,反應靈敏的設計,很容易適應任何大小的視窗和裝置。三種顏色的變化,每個動畫懸停樣式。

  25. Pro CSS Menu

  CSS選單 是一個多功能的CSS選單,準備將自己的設計下跌。在許多不同的配色方案,它也很容易定製幾個CSS調整。

  26. Bold CSS3 Navigation

  大膽的CSS3導航, 漂亮的印刷字型和一些非常大膽的色彩組合,是一個現代化的選單。它有兩個版本(橫向和縱向)和8個顏色方案,這將使你的頁面中脫穎而出。它是簡單和很容易使用的。

  27. Modern Vertical Menu

  現代的垂直選單是導航的兩種顏色方案。它可以處理下拉選單,它使用流暢的幻燈片效果顯示出來。

  28. Modern Menu

  現代選單 設計和開發是一個現代化的,靈活的,易於使用和定製選單。它是為您的網站使用創造一個完美的快速的動態選單。

  29. Metro

  地鐵受CSS3的新微軟地鐵UI選單的啟發。它配備了4種不同的“盒子”的佈局,影象動畫更不錯。是很容易的安裝和使用。

  30. jQuery jPList Plugin

  jPList  任何HTML結構的排序,分頁和過濾(DIV的,符合UL /李,表等)是一個靈活的jQuery外掛。

  31. Mega Menu Reloaded

  教程

  1。動畫文字和圖示選單與jQuery

 

  本教程將告訴你如何在光滑漂亮的動畫上懸掛一個選單。這樣做是為了使一些元素滑出,更改動畫專案的背景顏色,然後將元素用不同的顏色表現。

  (2)使用jQuery的動畫內容選單 

  本教程將告訴你如何建立一個漂亮的jQuery的餐廳主題的動畫內容選單。點選動畫選單項,與更多的資訊內容區域會出現。此外,背景圖片是要根據選單項被點選時改變。

  3。如何香料你的選單用CSS3 

  如何用CSS3建立你的選單:每個選單項新增一個影象和滑動懸停的快速提示。

  4。與偽元素建立一個黑暗的Web選單導航 

相關文章