45個非常漂亮的jQuery導航插件

本文列舉了45個 jQuery的導航插件和教程，演示通過jQuery實現一些導航效果，教您如何做一個有創造性和易於使用的導航。

正如我們所知道的，一個新用戶訪問一個網站時，決定他們去留的關鍵是最初的15-20秒種。這是至關重要的，你必須遵循統一的風格來設計您的網站，特別是導航的風格，可能性規則，讓用戶可以輕鬆地找到他們想要的內容。這裏最大的部分是開發一個菜單，即要直觀易用，又要符合你網站的設計風格。

在本教程中，作者說明了實施完善多層次的導航欄使用HTML，CSS和不顯眼的JavaScript的使用jQuery的一些代碼行來顯示和隱藏小節他的方法。

Mega Drop Down Menu w/ CSS & jQuery | Demo

一個完善的多級導航欄 | Demo

使用子畫面創建導航菜單 | Demo
精靈的CSS可以大大提高網站的性能，使用jQuery，我們可以很容易地實現真棒過渡效果。

標籤導航光滑水平滑動
在本教程中，您將創建一個導航菜單幻燈片水平。它從一個“標籤上包含的元素的右邊”設置。當點擊一個標籤幻燈片左側顯示的鏈接組。再次點擊該標籤，它滑出。

droppy - 巢式下拉菜單
這不是最靈活的插件，但如果你正在尋找一個基本的菜單，它是完美的。

jQuery Listmenu | Demo
這jQuery插件允許您方便地轉換爲長期，難以導航到一個緊湊，易於脫脂首字母爲基礎的菜單系統，可以快捷進出雙向訪問數百個項目名單。

Kwicks for jQuery | Demo

創建CSS＆jQuery的導航菜單
在本教程中，您將學習如何建設順利滾動使用jQuery和scrollTo插件影響一個CSS導航菜單。

蘋果風格菜單 | Demo
在這個深入教程中，您將創建一個蘋果風格豹-文本縮進菜單從頭開始。首先，您將建立在Photoshop菜單，然後您可以創建所需的HTML和CSS，並最終改善與jQuery它。

性感下拉菜單瓦特/ jQuery的＆的CSS | Demo
大部分下拉菜單看上去美觀，但發展中國家他們適度地降低也很重要。在本教程中，作者展示瞭如何創建一個性感的下拉菜單中緩慢下降。

使用jQuery超級下拉菜單 | Demo
一個大型的建議盤旋下降時，下拉菜單是0.5秒，另有0.5秒鐘的延遲當用戶移動鼠標了。這些準則，作者演示瞭如何建立一個大型的下拉可利用的時間延遲菜單。

JQuery Pager | Demo
jQuery的傳呼機是一個簡單的jQuery插件提供分頁功能，數據驅動的Web應用程序。

簡單的jQuery下拉 | Demo
jQuery的菜單不必很複雜，有時你可能想嘗試使它們的東西略有不同儘可能地簡單。此菜單插件，剝去了以最少的樣式代碼，但仍通常需要的所有功能。

平滑動畫菜單與jQuery | Demo
在本教程中，您將學習如何建立一個jQuery菜單和一些可愛的動畫和平穩影響它
Query的緩和插件.

時尚導航菜單使用jQuery | Demo
In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.

易風格jQuery的下拉式菜單 | Demo
本教程將告訴您如何創建一個簡單易風格與懸停鼠標事件和最基本的jQuery的動畫使用slideUp和slideDown菜單。

A Different Top Navigation | Demo
如果您想使您的網站脫穎而出，您可以考慮不符合“規範”當談到導航思想。在本教程中，您將正在這樣做，通過創建不同的多層次的橫向導航系統，它還是不夠直觀，任何人使用第一次。

Vimeo-Like Top Navigation | Demo
If you’ve ever visited the Vimeo 主頁您可能已經注意到在下拉菜單當你在搜索框上方盤旋，爲你提供不同的搜索選項來縮小搜索範圍。您將學習如何重新在本教程這種效果。

jQuery'd Bread Crumb – jBreadCrumb
這種可摺疊的麪包屑jQuery插件已經開發出來，處理深層嵌套的，冗長命名的網頁。而不是限制在斷絕方面表現出的元素數量，發展商選擇順應了可用性和搜索引擎優化客戶端解決方案。它也被證明是好看和好玩的。

idTabs
在不平凡-插件多功能idTabs使得添加標籤，一個網站非常簡單，打開了無限的可能性導航大門。這個插件網頁顯示您不僅是多麼容易idTabs使用和風格，而且還證明了導航選項您將有許多供您使用。

按鍵導航 | Demo
使用jQuery，您的網站的導航不必侷限於鼠標的激活。在這個高度，原實驗教程您展示瞭如何讓用戶瀏覽您的網站使用的鍵盤。

jQuery的滑動菜單 | Demo
在本教程中，您將學習如何創建一個滑動菜單按鈕，類似的效果，您可以看到在行動上PSDtuts超過+網頁。當按鈕被點擊時如果要全面鋪開一箱的鏈接，當單擊按鈕再次框充分回滾英寸.

下拉，iPod的細目，並飛出樣式
這種iPod風格的菜單插件提供的任何級別的數量嵌套結構的複雜輕鬆導航。整個菜單位於內固定大小的區域，當一個節點默認選中的“返回”鏈接，似乎使導航上一個（父）菜單下面的菜單。

Flickr菜單設計 | Demo
這是一個簡單的分步教程將告訴您，如何實現一個Flickr風格的冷滑使用jQuery和CSS效果菜單。

固定淡出菜單 | Demo
本教程的目的是建立一個固定的導航遵循用戶時，向上或向下滾動，只有巧妙地顯示了淡出，成爲幾乎透明本身。當用戶在它盤旋，然後在菜單變得不透明瞭。導航包括一些鏈接，搜索框，頂部和底部的按鈕，讓用戶瀏覽到頂部或頁面底部。

mb.menu | Demo
mb.menu是一個強大的jQuery的組件，可以幫助您建立一個直觀的多級樹菜單或上下文（右鍵）菜單。您可以添加您想要多子，如果您的子菜單或菜單不在網頁宣佈，該組件將得到它通過Ajax，調用模板的菜單中，您需要（數值身份證頁面上的“菜單“屬性）。

mcDropdown
該mcDropdown插件是一個UI控件，讓用戶選擇一個複雜的分層樹的選擇，允許爲鼠標和鍵盤輸入。這個插件的整體效果，有點像在Microsoft Windows“開始”>所有程序“菜單。

垂直或補充工具欄插件和教程

簡單的jQuery摺疊菜單 | Demo
這是一個非常簡單的摺疊菜單插件使用jQuery興建。與小組聯繫，他們將擴大在子菜單中點擊和項目時，不具備分項目的正常聯繫的項目。菜單將初始化的第一個擴展子菜單。

標籤式結構菜單 | Demo
本教程將告訴你如何構建自己的節省空間，標籤式界面，使用jQuery與slideDown / slideUp影響。

最新的內容可摺疊菜單 | Demo
在本教程中，您可獲得如何構建一個簡單的，但引人注目的是CSS，jQuery和花式效果的插件幫助緩解摺疊效果。

水平滾動菜單 | Demo
本教程教你如何創建一個水平滾動菜單，滾動自動根據您的鼠標軸輜運動和使用jQuery.color plugin to animate the background-color changes.

Create a Slick Tabbed Content Area using CSS & jQuery | Demo
在此嘖嘖您將學習如何建立一個簡單的小標籤在HTML信息框中，然後它使用純JavaScript功能，最後你會學到的方法達到同樣的效果使用jQuery。

Slide Out and Drawer Effect | Demo
蘋果網站是這一行動的作用有很大的示範鼠標就'節'和相關的鏈接標題平息暴露。是什麼使這種效果格外清涼的是，抽屜保持一個固定的高度和禁區之間的幻燈片。

“Outside the Box” Navigation with jQuery | Demo
This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

Sproing! – Thumbnail Menu | Demo
Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

Cool Animated Navigation | Demo
In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

jQuery File Tree | Demo
jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Creating a Floating HTML Menu Using jQuery and CSS | Demo
For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

BDC DrillDown Menu, an iPod-style menu | Demo
A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

jQuery Context Menu Plugin | Demo
The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

A ‘Mootools Homepage’ Inspired Navigation | Demo
This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.