http://designshack.net/articles/freebies/30-innovative-new-jquery-plugins/

30 _Innovative_New_jQuery_Plugins_Design_Shack.mht

Responsive Touch-Friendly Audio Player

This responsive audio player is the perfect example of jQuery at work. You simply include the plugin codes and create any typical HTML5 audio element. This will automatically be converted into a touch-friendly audio player with a dazzling CSS3 user interface.

Sidr

I am sure plenty of designers & developers recognize the sliding side menu. This became popularized from iOS mobile applications using sliding menu buttons in the toolbar. And now this effect may be replicated for websites using only jQuery and the Sidr plugin. Check out the live demo and see how this could work in your own projects.

Imageloader

Do you remember seeing all these lazyload image plugins? There are so many various options, and even some free open source WordPress plugins have been released. This particular image loader plugin follows a much nicer example with all images loading in a sequential order, following a fading effect. The live demo is a prime example of how you can apply this to your website.

Swatches

Although Swatches may not have a practical use in many website layouts, it is a wonderful jQuery plugin for toying with specific colors. This plugin will create a div area using a palette of related colors based on your input choice. Generating your own color scheme may be difficult and this is a unique open source tool for the job.

Hot on Facebook

Hot on Facebook is a rather obscure idea. But the plugin does work perfectly in all standards-compliant browsers, so for those who enjoy Facebook sharing this is for you! Hot on Facebook will take a URL and check the total number of FB shares. Then it will be displayed on the page as a social media sharing badge.

Toolbar.js

The open source Toolbar.js script is fairly easy to run, but has its limitations. This plugin will create a small tooltip menu of icon links which appears on any element you choose. It can be immensely powerful coupled with a user profile or other icon-command interface. However the effect is rather obscure, so don’t be surprised if you have a hard time fitting this into your layout.

jQuery PowerTip

As for handling regular tooltip hovers you may consider jQuery PowerTip. This is a fairly new plugin released as open source on Github. You can check out the live demo to see a better example, but the simplest explanation is creating tooltip popup menus when hovering over some HTML element.

jqTimeline

The jQtimeline plugin offers very unique functionality which I have never seen before. You can build a horizontal timeline with date events setup throughout the list. In this way, users may click on an event to display more information. It certainly has its practical uses but will take a bit of custom code to get working properly.

Swipebox

The Swipebox plugin is a mobile responsive jQuery image gallery. This is especially designed for mobile webapps and websites which are made responsive for smartphones and tablets. The image gallery will take up the entire screen, and you can even touch-to-swipe between other images in the slideshow.

MixItUp

MixItUp has a lot of various custom options and I would say this is closer to an intermediate jQuery plugin. You will need to understand a few concepts when customizing the default setup and adding this into your page. But it will allow quick sorting of elements within a set gallery like portfolio items, images, photographs, and so much more.

jQuery Spellchecker

Designers who are familiar with the in-browser spellcheck may be a fan or may completely hate it. This jQuery plugin offers a different solution where you may edit the callback function to display related vocabulary. It is a daring plugin which is completely free to use, but also requires a bit of customization to get working correctly.

ScrollUp

ScrollUp is in my top 5 new favorite plugins just for its ease of use and pre-built styles. Simply include the JS files into your webpage and setup the offset distance from the top. Then after a visitor scrolls beyond this limit a small fixed div will appear in the bottom corner. It is an excellent alternative to coding your own button from scratch.

Nod Frontend Validation

Nod is a frontend validation plugin for HTML input forms. Using jQuery you may setup the actual basis for what is considered good and bad data, then check these values after the user submits the form. It will not go through until all of the criteria are met.

Select2

Select dropdown menus have always been stuck in their own CSS styles. There are some posts online which delve into customizing your own select menu, but often not supported by all browsers. This jQuery plugin Select2 is an enhancement on the typical HTML select field. Just include the plugin within your heading and all select menus can be updated with a small bit of code.

Tooltipster

Aside from the other great jQuery tooltip plugin, I have to recommend Tooltipster for their alternative codebase. I have used Tooltipster in a few projects and it works just as described. Many of the options are so easy to implement, and this allows developers to customize their own tooltips with just a few CSS properties.

Vortex

This strange carousel-style plugin allows you to create a dynamic rotating panel of elements. The jQuery Vortex plugin is fairly new, and there are still updates being applied on a regular basis. However I think it is worth a mention since the techniques are still not as mainstream as you might expect.

iCheck

iCheck is one of the best jQuery plugins I have ever found to update your input fields. Checkboxes and radio buttons will receive a totally new look when you choose the proper skin and color style. I will admit that iCheck is a bit deceiving with so many confusing options at first. But the more you practice the easier it will get to include this plugin within your website(s).

Any List Scroller

ALS or Any List Scroller is a typical jQuery plugin for image slideshows. But instead of displaying the images in a bigger view, they are rotated like a typical homepage items scroll container. There are options to include arrows on both sides and allow visitors to manually switch between internal elements.

Tumbo

Tumbo is a fairly rudimentary plugin for quickly displaying a feed out of your Tumblr blog. This can be updated to display the contents from any Tumblr blog just by using the subdomain URL. Obviously not everybody will have a need for this, but it is good to know that developers are working their way through APIs like Tumblr built into JavaScript plugins.

Spectragram

Speaking of APIs – this Spectragram plugin is a quick method for accessing photos off Instagram. You simply include the JS files into your header and then specify a user or search query. The Spectragram plugin will pull all related results and link back to the original shot.

jQuery Stripe

The jQuery Stripe plugin offers a more traditional image gallery. Each photo will only display as a small vertical sliver which you may click to show the whole image. There are also arrows on the right and left sides to change between views. I don’t think it is the best option but it can be an offbeat solution for atypical website layouts.

SocialCount

SocialCount handles another strange feature which does get a lot of requests. This plugin will allow you to quickly pull out the numbers for Twitter, Facebook, and Google+ shares. Merely enter the target URL and you can display social media badges anywhere in your webpage.

Custom Scrollbar Plugin

jQuery Custom Scrollbar is a fascinating plugin which deserves a lot of attention. This has been online for quite a while now, but the effects still never cease to amaze. You can quickly make a div element with an overscroll feature using these custom scrollbars. It is perfect for handling custom content which should not take up the entirety of the layout.

Smallipop

Smallipop is yet another beautiful jQuery tooltips plugin. You should look at some of the examples to see how this would be implemented. Each tooltip plugin follows its own rules and they may or may not appeal to everyone. But I think Smallipop is a great choice for developers getting started in JavaScript libraries.

jPanelMenu

jPanelMenu is another popular jQuery plugin for using a sliding navigation. You may quickly include these codes within your website to add the effects on any page. Just target the open/close element and whenever the user clicks, it will display your hidden navigation. Take a peek at the live demo to see this effect in action.

Intro.js

Intro.js is an introduction guided tour plugin for jQuery. There are a lot of options and custom settings you may choose, but this also allows for a more unique website performance. I think Intro.js is the best jQuery plugin for creating a guided website tour. The CSS is easily malleable and you can demo with all sorts of different layouts.

Lightbox_me

The list of shadowboxes and lightboxes has grown tremendously since 2011. I think the jQuery plugin Lightbox_me is another beautiful example of this feature. You can setup images, forms, videos, and other HTML right within a modal lightbox. The JS codes are easy to learn and the plugin does not require a whole bunch of custom edits.

jQuery Carousel

I think the abitgone jQuery Carousel is definitely a peculiar option. This will display prev/next links right within the image div encapsulating all of the other images. It looks really nice in smaller spaces and you can resize the example to anything you need. I feel it is worth looking into but it may not come out as your favorite option.

Superbox

Are you familiar with how Google Images currently displays results? This is how jQuery Superbox works using your own static images. Visitors have the ability to browse thumbnails and once they click, a new div will open up displaying the full image. I really like this plugin because the user experience mimics Google very closely. And since people are already familiar with Google it provides a seamless exchange of data without much confusion.

KGallery

KGallery is another beautiful jQuery image gallery with slideshow features. The default icons are not permanent and you can obviously update other bits of the user interface. What really catches my attention is the option to include smaller image thumbnails within the gallery design. It is a fairly simple plugin to setup and I would recommend testing the live demo to see how you feel about the implementation.

jQuery Litelighter

Plenty of great syntax highlighters have been released over the past few years. But jQuery Litelighter is another plugin I really appreciate for the simplicity and graceful nature. You can generate highlighted syntax for nearly any popular language, and it should work using any of the most common web browsers.

bxSlider

bxSlider simply has one of the best user experiences for an image slideshow. You can implement this right onto your homepage or within any other page of the site. It will provide a solid design for users who are familiar with image slideshow features. Also the jQuery codes are very minimalist and do not bog down the website over long loading times.

MeanMenu

The MeanMenu plugin is a newer release and certainly worth looking into. I really like how the default navigation design will automatically resize based on the total number of internal links. Also you can include sub-menu links which offers visitors a quicker view of your nav menu. The design is not a great choice for everybody, however it is a solid plugin and may prove useful on some website projects.

Most Popular jQuery Plugins of March 2013

http://www.moretechtips.net/2013/05/most-popular-jquery-plugins-of-march.html

1. jQuery-menu-aim

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.

2. iCheck

Highly customizable checkboxes and radio buttons with jQuery and Zepto. It provides Identical inputs across different browsers and devices and support for Touch devices.

3. windows

loosely-coupled jQuery plugin for full-screen scrolling windows.

4. Maplace.js

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

5. Donuts

6. MagicSuggest

Auto-suggest combo box with bootstrap theme using jQuery.

7. Unslider

Unslider is a very simple jQuery Slider, still it comes with a range of options to customise it.

8. jQuery.Pin

jQuery.Pin helps to pin any element to the top of a container. It can be also disabled for smaller screen-sizes where there's no room for it.

9. Photoset Grid

A simple plugin to arrange images into a flexible grid, based on Tumblr's photoset feature.

10. HCaptions

HCaptions enables you to display caption overlays with cool effects over images, div's, ect..

11. Navi.js

Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all of your html code for multiple pages in one file.

12. JResponsive

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by "packing" them in tightly.

13. Selecter

A plugin to replace default select elements with something a little nicer.

14. Trip.js

A light-weight jQuery plugin that can easily customize a 'tutorial trip'.

25+ Excellent jQuery Menu Plugins

http://creativecan.com/2013/02/jquery-menu-plugins/

MenuStation – Real Unlimited Responsive Menu –

http://codecanyon.net/item/menustation-real-unlimited-responsive-menu/3076965?ref=andy4321&ref=andy4321&clickthrough_id=107725296&redirect_back=true

Metro Flexible Navigation – 

http://codecanyon.net/item/-metro-flexible-navigation/full_screen_preview/2796746

UberMenu – WordPress Mega Menu Plugin – MORE INFO

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

MenuStation – Real Unlimited Responsive Menu – MORE INFO

This plugin features real unlimited menu, responsive design, and many colors to change. it is easy to customize and light weight.

Menu with CSS3 Effects and Notification Bubbles – MORE INFO

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful.

niceTree – JQuery Tree Plugin – MORE INFO

Get rid of that ugly tree menu on your site with niceTree. An easy to install JQuery plugin with more options than you’ll ever need. niceTree will take your HTML and turn it into a collapsible menu system with unlimited menus within menus.

Metro Flexible Navigation – MORE INFO

The Metro Flexible Navigation is a simple, clean grid layout looking a lot like the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and drag-able at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.

MeanMenu – MORE INFO

Main features include hide or show menu children, orientation adjustment and control screen width where the plugin activates. This plugin is easy to setup and configure and bundled with configurable CSS.

Memu – A simple CSS / JavaScript / JQuery Menu – MORE INFO

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. It has feature so that when visitors are navigating your site, the selected item will stay highlighted.

Revolver – Sliding Website Plugin – MORE INFO

This is not a menu plugin actually, but it can do some powerful stuff and create a creative navigation on you website. Revolver is a jQuery plugin for creating full screen sliding websites. It can be integrated into any website template.

jQuery Animated Button & Menu – MORE INFO

The animated button & menu jQuery plugin allows you to easily replace <a> links with animated buttons and grouping buttons into a menu (drop down menu).

jAccordion – jQuery Accordion – MORE INFO

jAccordion is a complex and responsive jQuery plugin with powerful API, large amount of callbacks and options which let you customize it to suit your needs.

Cursor Following Menu – MORE INFO

This is a navigation menu that will always follow your cursor. It was generated using CSS and jQuery library, which is easy to configure and implement. The script features CSS styling, 2-level navigation and simple markup.

jQuery Drilldown Menu – MORE INFO

iPhone inspired drilldown menu. So easy. So powerful.

Sticklr WP – Sticky Side Panel WordPress Plugin – MORE INFO

Stickr WP, a sticky side panel menu WordPress plugin. Inspired by Envato site-switcher, after released as CSS3 +jQuery, due to popular demand I decided to create this WordPress plugin version. The features are similar with jQuery version, only WordPress version has an intuitively easy administration panel, so you don’t have to know the coding behind it.

Shuffling Tiles jQuery Plugin – MORE INFO

Inspired by the step by step movements of the shuffle dance and the new Metro UI look, Shuffling Tiles combines elements from both and then some, producing a versatile, animated and compact webpage widget. Use it when you have lot’s of information that you want to fit in a small area, and you want to present it in a lively, original and interactive way.

jQuery iNav – Products Showcasing Navigation – MORE INFO

iNav it’s a jQuery plugin that let you create an amazing animated Menu (even with multiple menus) or Items Showcasing. Inspired by Apple products navigation, iNav can introduce in your website a very powerful javascript navigation! In order to work properly, iNav requires at least jQuery 1.4 or higher.

jQuery Live Menu – MORE INFO

jQuery Live Menu is a jQuery plugin that allows you to create easily nice and animated menus. Menus are opened on left or right click on the defined target. You can customize layout, effects and the tooltip design by jQuery parameters .

PullOuts – jQuery Slide-out Widgets – MORE INFO

PullOuts allows to grab any piece of content from a web page and display it as a pullout widget. Whether it’s a block of text, images, shopping cart, login, search or subscription form, a video or any other content – you can make it a pullout.

jQuery Push Menu – MORE INFO

Now with hoverIntent integration. Cross Browser Compliant – IE9 , FF3+,Opera, Safari, Chrome. Mobile Ready – Works in mobile browsers. Sliding Sub menu level items.

Titan Menu – MORE INFO

Titan Menu, a fresh and powerfull menu solution.

Sticklr – Sticky Side Panel CSS3 + jQuery Plugin – MORE INFO

The latest version is version 1.4, made on January of 2012. Custom tab size option was added and the ability for a tab to act as link was improved.

Superfish – Free jQuery Menu Plugin - MORE INFO

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

Smooth Expandable Menu – MORE INFO

Smooth Expandable Menu is the definitive tool for building minimal vertical expandable menus, which can be easily customized due to its 17 built-in config parameters, directly from the html file / script call. The pack includes 3 samples (Serif, San Serif and Tiny), to make easier the integration on any web project. It uses Google Fonts library system, so you won’t need to integrate font files or @fontface scripts. It has been optimized for mobile devices.

jMenu – MORE INFO

jMenu is a jQuery plugin that allows the creation of horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists.

Navigation Menu Widget – MORE INFO

This is an advanced plugin that gives you total control over the output of your menus. Support shortcodes, widget and template function. Easy to customize, full features. and supports Twitter Bootstrap. Displays a list of menu as links. This plugin is based on the WordPress function: wp_nav_menu()

jPie jQuery Circular Menu – MORE INFO

jPie is a Contextual Circular Menu for jQuery. You can create countless instances and each instance can be fully customizable using the attributes provided by the plugin.

Fancy Typewriter – jQuery plugin – MORE INFO

Fancy Typewriter is a jQuery plugin for creating stunning menu effects and much more. Just add the plugin to any tag, which contains text. Check out the preview, which says more than words.

How to Turn jQuery Accordion into CSS3 Accordion

http://css.dzone.com/articles/how-turn-jquery-accordion-css3

Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo

That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.

animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!