Best jQuery Menus Plugins & Tutorials with Demo

    Stretchy Navigation in CSS & jQuery

    Stretchy Navigation in CSS & jQuery

    A rounded navigation trigger that stretches on click/tap to reveal the navigation items.

    Multi-Level Menu with CSS3 & JavaScript

    Multi-Level Menu with CSS3 & JavaScript

    A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.

    The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a back button (not shown in our demo). Deeper levels are referenced with a data attribute

    Dropit : jQuery Dropdown Menu Plugin

    Dropit : jQuery Dropdown Menu Plugin

    Dropit is a jQuery plugin for single level dropdown menu’s. Nothing fancy pants in here. Just simple and flexible dropdown’s in jQuery.

    Animating an SVG Menu Icon with Segment

    Animating an SVG Menu Icon with Segment

    A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

    Allec AJAX Off-Screen Menu

    Allec AJAX Off-Screen Menu

    Allec Off-Screen Ajax Menu is a perfect solution for agency and portfolio websites to enhance modern design and futuristic feel because of palette grid and off-screen positioning.

    Fully ajax support maintains dynamic loading without a need to refresh the page. It is an extra advantage your users will highly appreciate as there won’t be waiting time anymore, only instant content appearance. Happy users equals successful business.

    • Pure JavaScript
    • Ajax Support
    • Palette Grid Modern Layout
    • Overlay Menu Effect
    • Mobile Optimized
    • Fast Performance
    • Light Weight Navigation
    • Custom Scrollbar
    • Smooth Animation
    • SVG Graphic
    • Retina Ready

    Trunk.js : A responsive Navigation Web solution

    Trunk.js : A responsive Navigation Web solution

    Trunk.js is a responsive web solution for creating better navigation and layouts. It tucks your navigation into the “drawer” on many devices, and while it triggers with jQuery, it moves with CSS for a much smoother effect.

    jQuery Instant Responsive Menus with CSS3

    jQuery Instant Responsive Menus with CSS3

    Create different type of menus on the fly without changing the HTML Structure. Just replace CSS class names in the HTML markup to make a horizontal menu or any menu to function like a one page scroll menu, vertical menu, toggle menu, slide out menu, full screen navigation, tabbed menu, dots navigation and much more.

    Features:

    • One Page Smooth Scroll support
    • Customizable CSS3 animation effects (Faster than jQuery Animations)
    • Fully Responsive
    • Unlimited Color Themes
    • Light weight
    • Built with CSS3 and improved with some jQuery
    • Compatible with bootstrap

    nuContextMenu : jQuery Context Menu

    nuContextMenu : jQuery Context Menu

    A modern context menu with font awesome support for web apps. The script is extremely light weight (2.2 kB), and it treats the menu as the primary object. This means that a single menu can be attached to multiple elements.

    uilang.js : UI-focused Programming Language

    uilang.js : UI-focused Programming Language

    uilang is a dead simple programming language for web designers. With uilang, you write your code just like plain English, straight into your HTML using a <code> element. uilang’s logic relies on manipulating classes on HTML elements and using these classes in CSS to show, hide, animate and transform elements when a click occurs. This simple logic lets designers create most of the typical user interface behaviours: tabs, popovers, overlays, sliding menus, etc.

    Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

    Fixed Responsive One Page Nav

    Fixed Responsive One Page Nav

    Responsive, fixed and touch friendly one page navigation with animated scrolling.

    Features:

    • Fixed positioned, always visible navigation bar
    • Uses vanilla JavaScript, no jQuery required
    • Smooth animated scrolling
    • Removes 300ms tap delay
    • Adds a mask over the content when navigation is open
    • Auto highlights current location
    • Uses a tiny custom font for icons (only two characters included)
    • Closes the navigation when user tap’s outside of it