JC,产品经理,产品,网络营销,网络教育,多媒体教育,开源,富表现,RIA,Flex,Flash

55 Comments

9th
OCT

[收藏]50+jQuery的导航插件和教程

Posted by JCLee under 资源

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应用程序。

下拉，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.

jQuery UI Selectmenu
界面Selectmenu的jQuery插件的设计重复和扩大选择一个本地的HTML元素的功能，并允许您自定义的外观和感觉，添加图标，并选择内建立层次结构。最棒的是，它的建成与逐步加强，并考虑获得和允许所有本地的鼠标和键盘控制。

美丽滑出导航 | Demo
在本教程中，您显示了如何创建一个惊人的滑出式菜单或导航。导航将几乎隐藏 – 项目仅滑出时，对该地区的未来给他们的用户左右。这给出了一个漂亮的效果，使用这种技术可以节省您在网站上一些空间。

可选水平或垂直导航

光滑导航菜单
这个菜单的内容可以是达成无论从网页上直接标记，或外部文件，并通过Ajax的牵强。并jQuery的，可配置，时尚“幻灯片加淡出”由于是过渡期间适用的分菜单揭幕。菜单同时支持横向和纵向（侧栏）的方向。

Superfish – Suckerfish on ‘roids | Demo

简单的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.