45个jQuery的导航插件和教程

正如我们所知道的，一个新用户访问一个网站时，决定他们去留的关键是最初的15-20秒种。这是至关重要的，你必须遵循统一的风格来设计您的网站，特别是导航的风格，可能性规则，让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单，即要直观易用，又要符合你网站的设计风格。

本文列举了45个 jQuery的导航插件和教程，演示通过jQuery实现一些导航效果，教您如何做一个有创造性和易于使用的导航。

横向菜单导航插件和教程

Mega Drop Down Menu w/ CSS & jQuery | Demo

一个完善的多级导航栏 | Demo
在本教程中，作者说明了实施完善多层次的导航栏使用HTML，CSS和不显眼的JavaScript的使用jQuery的一些代码行来显示和隐藏小节他的方法。

使用子画面创建导航菜单 | 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.