應用於網站導航中的 15 個 jQuery 外掛

oshina發表於2013-10-15

  當考慮到網頁設計時,導航被認為是使網頁以使用者友好方式展現的一個重要部分。在現代的互動網站中,導航起著至關重要的作用,如果沒有正確地處理會影響你網站的訪問。適當的導航工具能夠幫助使用者在網站的不同頁面內容間進行互動並執行動作。這在電子商務網站及註冊網站等案例中是非常重要的。

  請務必記住——設計網站時簡約實現的簡潔、優雅、乾淨的設計總能贏得使用者的心。調查還指出,現代網路使用者沒有那麼多耐心,它們不會在混亂的網站中苦苦尋找而是直接選擇切換到另一個站點。這就是為什麼開發者需要非常注意採用適當的導航型別。

  在網站中實現導航欄的時候,使用jQuery導航外掛是十分簡單和快速的一個方式 。外掛各式各樣,在文章中我們將進一步討論15種當前最流行的效果最好的 jQuery 導航欄外掛。

  推薦文章: HTML5-10個最重要的特點和優勢

  1. Smint – 一個將節點轉化為導航欄的標籤的有效外掛。在網站單頁中 Smint 能使網頁平滑滾動. 這個外掛在專案中整合非常簡單,僅需要自定義調整滾動速度.

smint-jQuery plug-in

  2. SlimMenu – 這是一個很輕量級的jQuery外掛,可以用來方便地建立極具響應性的導航選單。使用SlimMenu,開發者不再需要再在媒體蒐集上費力,也不需要使用任何重量級外掛來建立巢狀選單。通過這個神奇的工具,可以將任何無序列表轉換為合適的包含子選單的選單,當在小螢幕裝置中開啟時可以自動變成向下平鋪形式的導航。

slimmenu-jQuery plug-in

  3. FlexNav – FlexNav是另一種獨特的外掛,它可以很容易地處理響應式Web頁面的任何複雜型別的選單。這個外掛支援無限級子選單,可以在不同螢幕尺寸佈局中工作。FlexNav外掛對鍵盤跳轉支援良好,這樣提供了更好的訪問能力。在移動裝置中它能友好地支援觸控。

flexnav-jQuery plug-in

  4. PageScroller – PageScroller是一個強大的基於js的平滑滾動導航工具,它基於強大的jQuery庫。自定義的設計提供強大的便利性,這個外掛適用於任何型別的網站。你可以調節滾動速度以及自定義選擇導航選單放置的位置。

page-scroller-jQuery plug-in

  5. Kwicks – Kwicks擁有可供開發者定製尺寸、螢幕寬度及間距等的選項。每個選擇的持續時間及效果都可以按照設計師的選擇定製設計。同時,在手持裝置上kwicks可以水平或垂直旋轉頁面。

kwicks-jQuery plug-in

  6. jBreadCrumb – jBreadCrumb是一個功能豐富的jQuery外掛,它提供了一種建立麵包屑導航的靈活方式。通常,麵包屑表單的選單長度很大,處理該問題的老方法是限制選單的數量。然而,jBreadCrumb使用另一種機制——倒置介面,根據元素的長度和數量靈活地採用不同的顯示方法。

jcrumbbread-jQuery plug-in

  7. MMenu – jQuery.mmenu是一個可以在任何移動或web佈局上覆制行為的外掛。這個外掛使用一些定製的選項將無序列表轉化為有序選單及子選單。Mmenu通過open、colse及切換等簡單函式來控制選單。

mmenu1-JQuery plug-in

  8. DDSlick – ddSlick是個非常輕量級的JQuery外掛,它用來製作可定製的下拉選單,且執行設計師在文字旁使用影像和描述。它提供了一個更好的頁面外觀和樣式效果。

ddslcik-JQuery plug-in

  9. JQuery Magic line Navigation – jQuery Magic Line Navigation允許開發著通過設定背景及下劃線來強調導航的任意特定區域。使用者對滑鼠滑過及導航的不同連線可以定製不同的效果。jQuery中的動畫效果在這裡也可以使用。

jquery-magicline-navigation

  10. Navgoco – 這是一個非常簡單但很強大的jQuery外掛,它可以將一個無序列表轉化成一個結構化的多層次導航。通過使用Cookie它還具有在會話間保持子選單的能力且可用來製作手風琴選單。

Navgoco-JQuery plug-in

  11. Sidr – 這是一個用來建立側邊隱藏選單的jQuery外掛。選單可以被自定義設定為在頁面的左側或右側顯示,且多側選單可以顯示在同一個頁面上。為適應響應式網頁佈局,Sidr選單可以附加到一個按鈕上,這已被證明對小螢幕裝置是一種非常有效的導航方法。

sidr-jQuery plug-in

  12. Naver – 這是一個特性豐富的用於建立響應式導航的jQuery外掛。使用這個工具可以製作活潑的導航效果且對移動裝置支援良好。這個外掛相容Firefox、Safari、Chrome和IE7 +。

naver-jQuery plug-in

  13. Easy Drop Down – 這個獨特的jQuery外掛可以輕鬆地將元素轉化成可定製的下拉選單導航。它具有簡潔、相容驗證、語義標記、鍵盤控制、文字搜尋、列表項內部滾動以及相容觸控式螢幕裝置的本地UI等特性。

easydropdown-jQuery plug-in

  14. JMenu – jMenu可以讓開發人員輕鬆建立水平樣式導航以及無限級的子選單。它也需要jQuery UI,且支援所有JQuery UI的定製效果,如淡入或幻燈片等。頁面的外觀和風格可以在CSS檔案中設定,這樣使得它很容易更新。

jmenu-JQuery plug-in

  15. Menu Aim – 這是一個用來建立下拉選單的jQuery外掛,這個外掛可以準確的區分使用者是試圖在一個下拉選單項上懸停或是希望進入子選單。Menu Aim通過檢查滑鼠在螢幕上的每一個瞬間來實現這個目的。這使得它更加使用者友好適於導航。

menu-aim-JQuery plug-ins

  這裡還有許多你可以嘗試的其他jQuery外掛讓你輕鬆完成導航效果,如Horizontal Nav、jQuery ListNav、TinyNav.js、 Flaunt.js、Smart Menus等。

  原文地址:jquery-navigation-plugins-for-website/

相關文章