Best jQuery Menus Plugins & Tutorials with Demo

    Bootstrap Dropdown Hover : jQuery Plugin

    Bootstrap Dropdown Hover : jQuery Plugin

    A simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way. Compatible with every device.

    jQuery Accessible Mega Menu

    jQuery Accessible Mega Menu

    A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin. It is modeled after the mega menu on adobe.com but has been simplified for use by others. An brief explanation of our interaction design choices can be found in a blog post at Mega menu accessibility on adobe.com.

    NinjaRadial : Clean Radial jQuery Menu

    NinjaRadial : Clean Radial jQuery Menu

    This is a great radial menu jquery plugin to be used in your website or management system.

    • Clean and easy implementation;
    • Customize each button functionality;
    • Set colors and styles to each button;
    • Add how many buttons you want;
    • Configure size, distance and colors easily;
    • Call it from any element you want;

    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.

    gizmoMenu : Customizable jQuery Context Menus

    gizmoMenu : Customizable jQuery Context Menus

    gizmoMenu gives you full design control over your site’s context menu. Just copy and paste one of the HTML menu styles and modify it to your liking. All HTML is exposed – allowing you to expand gizmoMenu however you like.

    • Lightweight and easy to use
    • Copy and Paste approach – no lengthy docs!
    • DropDown style contextmenu
    • Hamburger style contextmenu
    • Horizontal style contextmenu
    • Includes 6 color presets
    • Use any menu you want – including MegaMenus!

    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

    jQuery Menu Puncher

    jQuery Menu Puncher

    Menupuncher is simple fullscreen navigation plugin for jquery.

    Block Scroll : jQuery information Presentation into Blocks

    Block Scroll : jQuery information Presentation into Blocks

    Block scroll is a jQuery plugin that turns a set of elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.

    Advanced Off Screen Menu with jQuery & CSS3

    Advanced Off Screen Menu with jQuery & CSS3

    Think of it as a full-screen off-screen menu on (a)steroids.It is an HTML5/CSS3 responsive solution for using (and making) animated large off-screen menus. It uses CSS transitions that are hardware accelerated and much faster then jQuey animations.

    • 20 responsive presets. (Check the live preview button to test them.)
    • Browser based Editor with 30 presets.
    • Compatible with all HTML5 browsers INCLUDING MOBILE! (IE10+, Chrome, Safari, Opera, Firefox). Tested on iOS and Android.
    • Simple usage, include 2 files (css and js) and add literally 2 lines of code.
    • requires almost NO change on existing HTML sites.