55款超强 jQuery 导航菜单插件

1. mb.verticalSlider

55款超强 jQuery 导航菜单插件_第1张图片

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Demo

1.1. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview.

View Demo

2. Fly Slideshow

55款超强 jQuery 导航菜单插件_第2张图片

Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with a nice “fly” effect. Images fly from left to right with and have a fade effect.

It also features:

  • Direct navigation (you can jump to any slide by clicking dots at top-right corner)
  • Previous/next controls
  • Image decriptions (it gets them from alt tag)
  • Only 5kb size

Demo

3. OS X Finder-like ColumnView

55款超强 jQuery 导航菜单插件_第3张图片

This is a jQuery (1.4 as of writing) extension for mimicing the OSX Finder column behavior. You specify an initial element: $(‘#columnview’).columnview(); And the plugin takes the contents() of that node and places it in the first ‘column’. Any links within that column are grabbed, preventDefault()’d and instead they will perform a $.get request and enter that data in the next column.

Demo

4. Blast Slider – jQuery Photo Slider

55款超强 jQuery 导航菜单插件_第4张图片

Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effects – slide explodes into particles and then collapses to a new slide!

Demo

5. Photo Rotator jQuery Plugin

55款超强 jQuery 导航菜单插件_第5张图片

Photo Rotator JQuery plugin is an easy to use JQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Highlighted features:

  • Driven by xml or arrays
  • 3D Transition Effects (support in Safari)
  • Easy to setup
  • Slide show controls
  • Easy customization
  • Compatible with IOS mobile safari

Demo

6. infiniScroll

55款超强 jQuery 导航菜单插件_第6张图片

“infiniScroll” was written as a jQuery plugin. It works for blog posts… but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling? We like to scroll more than we like to go to a new page in some cases. It’s easier to get to items, and you already waited for things to load, so why load again! Posts and tweets are one thing, but this plugin will also work for leaderboards, portfolio items, anything where you want to load subsequent elements.

Demo

7. jQuery Gestures

55款超强 jQuery 导航菜单插件_第7张图片

The jQuery Gestures project is a plugin for the jQuery JavaScript Framework, which adds mouse gesture support to a page or zone on a web page. This plugin also supports composite gestures, which combine several compass directions to create a shape. This gives gestures more variations than the eight compass points.

Demo

8. jQuery Menu Selector

55款超强 jQuery 导航菜单插件_第8张图片

This plugin makes menu items active by location path.

9. jQuery Stepy – A Wizard Plugin

55款超强 jQuery 导航菜单插件_第9张图片

jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.

Demo

10. jQuery Slidy – A Transition Plugin

55款超强 jQuery 导航菜单插件_第10张图片

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Demo

11. Slide Down Menu

55款超强 jQuery 导航菜单插件_第11张图片

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Demo

12. jQuery Pageswitch Plugin

55款超强 jQuery 导航菜单插件_第12张图片

This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.

13. Apple style Navigation with CSS3 JQuery

55款超强 jQuery 导航菜单插件_第13张图片

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

Demo

14. Smart Cart 2 – jQuery Sopping Crt Pug-in

55款超强 jQuery 导航菜单插件_第14张图片

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Demo

15. Flyout Ribbon using jQuery and CSS3

55款超强 jQuery 导航菜单插件_第15张图片

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Demo-Click on the arrow on the right hand side of your screen to see the demo in action.

16. Easyrpc

55款超强 jQuery 导航菜单插件_第16张图片

This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration.

17. TN34 Facets

55款超强 jQuery 导航菜单插件_第17张图片

This plugin uses the CSS clip styling method and the jQuery.clip plugin to show sectioned containers positioned in the same area and to expand a hovered container to its maximum width. Just like an accordion but much more powerful.

Demo

18. Keyboard Links

55款超强 jQuery 导航菜单插件_第18张图片

Keyboard links is a plugin which allows the user to quickly find any link on the page and click it by just using the keyboard. The user presses “l” and a toolbar appears at the top of the page then they start typing to search for the link that they want and a list appears of those links, they can then select a link by moving up and down keys and whilst doing so the focused link will be scrolled into view and highlighted, here’s ademo page which should fill in all the blanks.

19. iX Framework

55款超强 jQuery 导航菜单插件_第19张图片

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Demo

20. Hijax

55款超强 jQuery 导航菜单插件_第20张图片

The Hijax plugin is a JQuery plugin which allows you to add Ajax capabilities to your site, while maintaining search engine friendliness and browser history button support. It provides a simple and easy way to transform your site into a dynamic Ajax site, providing a richer user experience.

Demo

21. JAWS: News Ticker and Mini Accordion

55款超强 jQuery 导航菜单插件_第21张图片

This widget-esque script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has ‘more info’ data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.

22. Subway Map Visualization jQuery Plugin

55款超强 jQuery 导航菜单插件_第22张图片

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Demo

23. Sticky Section Headers

55款超强 jQuery 导航菜单插件_第23张图片

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Demo

24. Headerlinks

55款超强 jQuery 导航菜单插件_第24张图片

The jQuery headerlinks plugin will automatically create a table of contents block anywhere on the page with any style and any content you desire. It has a tremendous amount of flexibility and does many things automatically.

24.1. Sliding Tabs – jQuery Plugin

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.

View Demo

25. WZSplitter

55款超强 jQuery 导航菜单插件_第25张图片

WZSplitter is a flexible, easy to use layout plugin. It helps end users to set up any combination of resizable panels just by providing a few configuration values. Main features:

  • Resizable panels, collapsing/expanding and stretching/shrinking functions.
  • Skins.
  • Unlimited nesting and linkage effects on panels’ actions.
  • Default values driven, panels can be customized by simply changing configuration values.
  • Programmatically control and event triggers using callback functions.

26. Autobrowse Endless Scroller

55款超强 jQuery 导航菜单插件_第26张图片

When run on a DOM element, this plugin will make the element grow and fill its content automatically when the user scrolls to the bottom of the element. The content is fetched via ajax, and the plugin keeps a cache using local storage.

Demo

27. Panoscoper

55款超强 jQuery 导航菜单插件_第27张图片

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

28. jCrumb

55款超强 jQuery 导航菜单插件_第28张图片

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with JQuery UI.

29. jxSlider

55款超强 jQuery 导航菜单插件_第29张图片

jxSlider widget turns the selected DIV into a small embedded ajax tabbed-navigator. The ajax-loaded content will automatically and recursively be shown into the initial DIV.

30. Ninja UI

55款超强 jQuery 导航菜单插件_第30张图片

Ninja user interface is skilled in the techniques of JavaScript and CSS, going unnoticed until called upon to perform the arts of webjutsu.

Demo

31. jQuery Scroller

55款超强 jQuery 导航菜单插件_第31张图片

With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!

Some Features:

  • Velocity, horizontal or vertical direction, starting/ending points, finite or infinite loops, move type (‘linear’ or ‘ping pong’)
  • Configure mouseover/mouseout events or control programmatically scrolling functions from an external element
  • Play, pause, resume scrolling animations or set a custom pointer.

32. Image Hover Move

55款超强 jQuery 导航菜单插件_第32张图片

A simple and practical navigation or featured image jQuery plugin.

33. Dynamic Navigation Menu

55款超强 jQuery 导航菜单插件_第33张图片

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

34. jQuery One Page Navigation Plugin

55款超强 jQuery 导航菜单插件_第34张图片

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

35. Slider Menu

55款超强 jQuery 导航菜单插件_第35张图片

Though certainly nothing new in the world of jQuery or even menu systems Slider Menu is a small compact menu animation plugin that creates a simple yet smooth menu using a UL list.

36. Multi-Level Accordion Menu

55款超强 jQuery 导航菜单插件_第36张图片

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

Demo

37. Sliding Pictures Menu

55款超强 jQuery 导航菜单插件_第37张图片

This is a jQuery plugin that makes a beautiful sliding menu with pictures. Some features:

Some features:

  • Set default menu item open.
  • Leave active menu item open.
  • Remember active menu item using cookies.
  • Use debug function.

38. onCube

55款超强 jQuery 导航菜单插件_第38张图片

This plugin generate a die like a Rubik’s Cube. You can use it for navigation, categories or whatever you want. The plugin works in IE6 and IE7 as well as in Firefox and IE8. It also looks very good on iPhone, iPad & Co.

Demo

39. Memu – A simple CSS / JavaScript / JQuery Menu

55款超强 jQuery 导航菜单插件_第39张图片

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Demo

40. Dropp

55款超强 jQuery 导航菜单插件_第40张图片

Dropp is a jQuery plugin which replaces regular dropdown menus (