Best jQuery Responsive Plugins & Tutorials with Demo

    Priority Navigation : jQuery Responsive Navigation Menu

    Priority Navigation : jQuery Responsive Navigation Menu

    Priority Navigation is a jQuery plugin for creating arbitrarily-prioritized responsive navigation menus.

    The main feature that sets it apart from other examples, is that it allows for prioritization ordering independent from menu ordering. Menu item prioritization is managed by applying data-attributes to the elements.

    jQuery Animated Screenshots Plugin

    jQuery Animated Screenshots Plugin

    jQuery plugin that animates a full height screenshot (or any image) within a parent div to simulate a user scrolling the page.

    Fullpage : jQuery fullpage Animated Slider

    Fullpage : jQuery fullpage Animated Slider

    Fullpage is a  jQuery plugin for fullpage animated slider.

    PaW Carousel : jQuery Responsive Carousel

    PaW Carousel : jQuery Responsive Carousel

    A responsive carousel with thumnail navigation jQuery plugin.

    • Under 6KB when minified
    • @2x/high-res/retina image support
    • Add multiple carousels on one page
    • Completely rewritten to be faster and more reliable
    • Better loading of images to look smoother
    • More reliable video scaling
    • More robust at all screen sizes
    • Choose whether to resize or crop images at smaller screen sizes

    PriorityNavigation.js : JavaScript Responsive Navigation

    PriorityNavigation.js : JavaScript Responsive Navigation

    PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don’t fit its parent.

    • No dependencies
    • Smart calculation of available space
    • Flexible
    • Non obstructive menu dropdown
    • Callbacks

    Responsive Bootstrap Sidebar Navigation

    Responsive Bootstrap Sidebar Navigation

    HOE Navigation Menu consist of both Horizantal and Vertical navigation menu based on CSS3 and Jquery. Its lightweight and compatible with almost all major browsers and devices. It supports four levels sub menu with shrink, Overlay and push effect.

    Features:

    • Fully Responsive ready for Desktop, Tablets and Mobile
    • Multiple Color options
    • Bootstrap based
    • Options to choose Sidebar Navigation or horizontal navigation

    Tinacious : Fluid Video jQuery Plugin

    Tinacious : Fluid Video jQuery Plugin

    Tinacious Fluid Video is a jQuery plugin to create fluid videos for Responsive Web Design.The CSS it uses was acquired from a variety of internet resources without luck of finding an original author.

    It is easy to use. All you need to know is the video ID and whether it’s a YouTube or Vimeo video.

    ProjectBlocker : jQuery solution for Blocking Uncomplete Site

    ProjectBlocker : jQuery solution for Blocking Uncomplete Site

    A handy jQuery solution for blocking responsive, IE, or incomplete bits from being seen while in development.

    Features:

    • Block responsive web design – gives you the ability to demo coded previews without worrying about how the project might look on mobile devices.
    • Block the homepage – show a polite message that a page isn’t yet ready to be viewed to keep visitors out of broken or unfinished areas of preview sites.
    • Block Internet Explorerduh.
    • Customizable and friendly blocking messages – because good UX is the right thing to do.
    • Bypass for developers – for sanity.

    Wanker.js : jQuery Easter Egg Plugin

    Wanker.js : jQuery Easter Egg Plugin

    A jQuery plugin that reveals a takeover when people start excessively resizing their browser.

    jquery.wanker.js is the perfect easter egg plugin for designers, photographers, writers, and other creative people with a sense of humor displaying their work on the web wishing their viewers to focus more on their work, and less on the magic of media queries.

    Responsive Layered Slider with CSS3 & jQuery

    Responsive Layered Slider with CSS3 & jQuery

    In this tutorial you will lean how to create a responsive layered slider. The slider will have multiple slides, each slide will have multiple layers which can have a different fade in effect.

    The entire slider works by using just a JavaScript document and you don’t have to attach any CSS style sheets to use it. Each layer will have 18 possible effects which you can use to your liking. All animations are created by inserting CSS code into the page using JavaScript