Best jQuery Menus Plugins & Tutorials with Demo

    CSS Mobile Header Animations

    CSS Mobile Header Animations

    I have created this resource to highlight some navigation animations. By explaining the first example I hope you will understand the rest animations. The main thing that will differ is the navigation animation.

    jQuery contextMenu plugin & Polyfill

    jQuery contextMenu plugin & Polyfill

    The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site’s or trendskitchens’ this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

    cbFlyout : jQuery Responsive Navigation Plugin

    cbFlyout : jQuery Responsive Navigation Plugin

    cbFlyout is a responsive navigation jQuery plugin for developers to help them in their projects handling.

    TOC : jQuery Table of Contents Plugin

    TOC : jQuery Table of Contents Plugin

    TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.

    Features:

    • Completely customizable
    • Click to smooth scroll to that spot on the page
    • Automatically highlight the current section
    • Extremely lightweight (744 bytes gzipped)
    • Can have multiple on a page

    Megamenu.js : jQuery Responsive MegaMenu

    Megamenu.js : jQuery Responsive MegaMenu

    Last responsive megamenu you’ll ever need.

    Features:

    • Cross-browser copatibility
    • No classes! (for dropdowns or lists)
    • Smart – knows when to show megamenu, and when to show a normal dropdown
    • 100% responsive, works on all devices
    • Seamless wordpress integration
    • Super fast
    • Uses jquery animations (IE8 copatible)
    • Easy to use
    • Written in LESS (easy to abuse)

    Section Scroll : jQuery Scrollable Section Navigation

    Section Scroll : jQuery Scrollable Section Navigation

    Section Scroll is a lightweight jQuery plugin for automatically generating a side bullet navigation on your one page scrolling website. Click on the navigation to scroll smoothly through different sections, automatically selects the correct navigation items.

    Sticklr PHP : Easy Sticky Side Panel Builder

    Sticklr PHP : Easy Sticky Side Panel Builder

    Sticklr PHP is a PHP script which provides an easy way to generate sticky side panel navigation menu in server-side from various sources of formats: PHP, JSON, or MySQL database table.

    Full-Screen Menu Overlay with CSS3 & jQuery

    Full-Screen Menu Overlay with CSS3 & jQuery

    A full-screen menu, showcasing your brand and website navigation. Our full-screen menu is built using HTML, CSS, and JavaScript. The HTML defines the structure, the CSS is used for animation, and JavaScript triggers the animations.

    Vertical Fixed Navigation with CSS & jQuery

    Vertical Fixed Navigation with CSS & jQuery

    A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

    Inspiration for Line Menu Styles with CSS3

    Inspiration for Line Menu Styles with CSS3

    The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today we’d like to share a set of ideas for using the line as a design element in horizontal menus. There are many creative possibilities, some minuscule and subtle, others bold and more extravagant. We’ve prepared a little inspirational set for you where we explore some line menu styles.