Best jQuery Menus Plugins & Tutorials with Demo

    Draggable Menu with Image Grid Previews

    Draggable Menu with Image Grid Previews

    A draggable inline menu with a scattered thumbnail preview of an image grid.After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.

    PrMenu : jQuery Responsive Multi Dropdown Menu

    PrMenu : jQuery Responsive Multi Dropdown Menu

    PrMenu is a very lightweight, responsive menu plugin for jQuery. Provides a menu with links evenly distributed across width of menu container.

    Features:

    • Links are evenly distributed within menu container
    • Maximum four menus levels (three nested)
    • Auto text wrap of long link text (maximum two lines)
    • Auto link background colors for all levels based on initial background color
    • All settings can be changed by passing in your own options

    Underwater-Style Navigation Using PixiJS

    Underwater-Style Navigation Using PixiJS

    A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.This tutorial assumes that you are proficient with JavaScript. A familiarity with WebGL and PixiJS is useful.

    Portfolio Website Concept with Advanced Circular Motion

    Portfolio Website Concept with Advanced Circular Motion

    An animated portfolio website concept with the circular motion made with CSS3, jQuery and GSAP’s TweenMax and CSSPlugin.

    PLON : Simple SCSS & JS framework based on jQuery

    PLON : Simple SCSS & JS framework based on jQuery

    PLON is a simple SCSS & JS framework based on jQuery and Gulp.

    1. This framework was created for front-end developers who don’t want any base visual styling, for people who likes to start from a blank page and have full controll over the effect of their work.
    2. SCSS structure and class naming encourages developers to use objective CSS (OOCSS).
    3. jQuery plugins are very easy to install and to debug.
    4. Provides each plugin as a separate file – so you don’t have to use unnecessary code.

    QuixNav – Bootstrap Admin Dashboard Navigation

    QuixNav - Bootstrap Admin Dashboard Navigation

    QuixNav is a bootstrap admin dashboard navigation menu.QuixNav have a different menu styles :

    • Modern
    • Compact
    • Mini
    • Vertical
    • Horizontal

    Circular-Menu : Circular Navigation Menu with JavaScript & CSS

    Circular-Menu : Circular Navigation Menu with JavaScript & CSS

    In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.

    Slide Out Navigation with CSS & TweenMax

    Slide Out Navigation with CSS & TweenMax

    A details navigation with a box that slides out from the bottom left of the page and simple animation for menu items, that follows the first one.

    NAVX : Ultimate Navigation Plugin

    NAVX : Ultimate Navigation Plugin

    NAVX is ready to run on the most diverse devices, from mobile devices to tablets and desktops.A highly adaptable component.

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.