Best jQuery Menus Plugins & Tutorials with Demo

    navIgo : Multipurpose jQuery Responsive Navigation Plugin

    navIgo : Multipurpose jQuery Responsive Navigation Plugin

    One can truly say this is really the ultimate navigation tool.With 65 jQuery plugin parameters there are thousands of customization options… literally!
    All menus on this page are initialized with the same jQuery plugin settings, all the differences you see between the menus are managed through data-attributes.

    Features:

    • Cross Browser Support (IE9 – Firefox – Chrome – Opera – Safari) + browser fallback message for IE9 below cases
    • 65 plugin parameters: you can control almost anything, and easy!
    • Horizontal or vertical orientation
    • Support for fullwidth dropdowns: any complex layout allowed, text blocks, video, tables, typograpy pictures
    • Easy skin control: set button colors, mouseover colors, text, shadows, alpha transparence directly with plugin parameters
    • Super granular Google font support: you can set font type and size for Main buttons, sub buttons /titles, subtitles and text
    • Auto active-button state: based on url address but it works even for # links (useful for ajax loaded pages)
    • 25 predefined colors: ready to use color classes inspired from metro colors
    • Programmable responsive behavior: you can set the limit screen resolution for responsive mediaquery activation.

    jKit : jQuery based UI Toolkit

    jKit : jQuery based UI Toolkit

    A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things!

    jQuery Horizontal Drop-Down Menu inspired by the Microsoft.com

    jQuery Horizontal Drop-Down Menu inspired by the Microsoft.com

    A responsive horizontal drop-down menu inspired by the Microsoft.com menu.This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.

    dropdown.dot.js : jQuery Plugin for super-flexible Dropdowns

    dropdown.dot.js : jQuery Plugin for super-flexible Dropdowns

    A JQuery Plugin for super-flexible Dropdowns based on dot.js Templates.

    Horizontal Navigation Bar with jQuery Dropdown Menus

    Horizontal Navigation Bar with jQuery Dropdown Menus

    In this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.

    scrollNav : jQuery plugin for building a scrolling Side Nav

    scrollNav : jQuery plugin for building a scrolling Side Nav

    A jQuery plugin for building a scrolling side nav.ScrollNav is a light jQuery plugin that grabs your page’s existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation. Scroll this page and watch it follow along w/ you.

    Top Drawer : A smooth dropdown menu with jQuery & CSS3

    Top Drawer : A smooth dropdown menu with jQuery & CSS3

    Top Drawer is a smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.

    Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters the translate value to bring it into view. Modernizr will detect whether the user’s device is capable of CSS transforms, if it isn’t we simply show and hide the menu after the button is pressed – no point in animating if it isn’t going to work smoothly.

    jQuery Smart Responsive Menu with CSS3

    jQuery Smart Responsive Menu with CSS3

    Smart Responsive Menu is powerful dropdown menu solution that will work with mobile devices and different screen sizes. Menu relies on CSS media queries to modify menu display for different resolutions. By default, plugin changes paddings and font sizes for screen resolution higher than 480px. For less than 480px, menu changes from horizontal navigation into vertical and gets hidden behind the menu item.

    Styling Effects:

    • Gradient: with three different gradient styles
    • Rounded: with one class for the rounded display
    • Box Shadow: with one class for the shadow
    • Text Shadow: with two classes for different shadows
    • Transitions: with five different transition effects
    • Menu Links: with three types of characters and arrows

    Off-Canvas Navigation for Responsive websites with jQuery & CSS3

    Off-Canvas Navigation for Responsive websites with jQuery & CSS3

    In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.

    jQuery Multirow Checkbox Menu like Gmail

    jQuery Multirow Checkbox Menu like Gmail

    jQuery plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.