50-jquery-menus
Collection of free jQuery menu examples and plugins.

Collection of free jQuery menu examples and plugins.

  1. jQuery Context Menus
  2. jQuery Fullscreen Menus
  3. jQuery Mega Menus
  4. jQuery Off-Canvas Menus
  5. jQuery Sliding Menus
  6. jQuery Scrolling Menus
  7. React Menus
  8. CSS Menus
  1. jQuery Menu Examples
  2. jQuery Menu Plugins

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Shosuke Doi

Made with

  • HTML / CSS / JS

About a code

Mobile Nav Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • creme

Made with

  • HTML / CSS (SCSS) / JS

About a code

Uber-like Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Author

  • Jessica Valeska da Silva

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Menu Scroll Left

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Leon Heess

Made with

  • HTML / CSS / JS

About a code

Droplet Menu Animation

Droplet scroll animation for the hamburger menu in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu with Morphing Shapes

jQuery menu with morphing shapes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Author

  • Yiting Liu

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu

Horizontal jQuery menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Tobias Glaus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Navigation with Scrolling

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Jon Wilcox

Made with

  • HTML / CSS (Less) / JS

About a code

Expanding and Collapsing Hamburger Menu

Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

Hamburger Menu

CSS and jQuery hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Giorgio Acquati

Made with

  • HTML / CSS (SCSS) / JS

About a code

Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mobile Navigation

Mobile navigation animation using GSAP.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Author

  • Praveen Kumar Gorakala

Made with

  • HTML / CSS (SCSS) / JS

About a code

Radial Menu

Radial menu – creator visons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, font-awesome.js

Author

  • Jordan

Made with

  • HTML / CSS / JS

About a code

Side Menu Animation

Side menu animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Aaron Awad

Made with

  • HTML / CSS / JS

About a code

Multi-level Side Nav Menu

This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • Praveen Bisht

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Slide Out Navigation Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Dronca Raul

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, feather.js

Author

  • Aaron Taylor

Made with

  • HTML / CSS (SCSS) / JS

About a code

Burger Menu

This is a burger menu for an upcoming project I am working on. I have tried to focus on the animations to give that polished feel when you open the menu item.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dogacan

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Mobile Dropdown Menu

Mobile dropdown menu example with keyframe animations and transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Off Canvas Mobile Submenu

An experimentation that sets all submenus off screen so that they can be toggled in and out of view when their parent arrow elements are clicked.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Tim Normington

Made with

  • HTML / CSS (SCSS) / JS

About a code

Diagonal Mega Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, jquery-ui.js, tweenmax.js

Author

  • Alberto

Made with

  • HTML / CSS / JS

About a code

Multi-Device Scrolling Menu

A simple responsive horizontal menu ready for any device. For the sample only the background colour will change between countries.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Author

  • James Mejia

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Mega Dropdown

Original problem was having to create a mega dropdown that was responsive. The design required each column to have a border and have chunks of links inside of that. This is a mobile-first solution that gives you markup that makes sense for mobile/desktop using data attributes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, enquire.js

Author

  • J Scott Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sidebar Menu Concept

Sidebar menu that pushes content aside in 3D space. Still prettifying things.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Timofey

Made with

  • HTML / CSS (SCSS) / JS

About a code

Dota 2 Wheel Chat

With this module, you can create wheel menu, like such in Dota 2 game. Press left mouse button, to see it. Choose one of menu items, to say something to your teammates!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, wheel-menu.js

Author

  • Andrey Pokrovskiy

Made with

  • HTML / CSS (Less) / JS

About a code

Circular Layered Menu

Circular, vinyl-like menu with explanatory label that pop when icons are hovered.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, tweenmax.js

Author

  • Chrysto

Made with

  • HTML / CSS / JS

About a code

Lastik Menu

Simple lava-lamp like horizontal menu, using jQuery and Tweenmax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Demo image: Hiraku.js

Github activity

  • 65 stars
  • 12 watchers

About the plugin

Hiraku.js

Hiraku.js – jQuery offcanvas menu plugin.

Demo image: Sidebar Menu

Made by

  • huang.xinghui

Github activity

  • 42 stars
  • 4 watchers

About the plugin

Sidebar Menu

Sidebar menu jQuery component base on AdminLTE.

Demo image: Slide And Swipe Menu

Github activity

  • 96 stars
  • 12 watchers

About the plugin

Slide And Swipe Menu

A sliding swipe menu that works with touchSwipe library.

Demo image: Drawer

Made by

  • Yasuyuki Enomoto

Github activity

  • 477 stars
  • 29 watchers

About the plugin

Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Demo image: Slinky

Github activity

  • 430 stars
  • 20 watchers

About the plugin

Slinky

A light-weight, responsive, mobile-like navigation menu plugin.

Demo image: Tendina

Made by

  • Ivan Prignano

Github activity

  • 139 stars
  • 15 watchers

About the plugin

Tendina

Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.

Demo image: Bootstrap Submenu

Made by

  • Vasilii Artemchuk

Github activity

  • 343 stars
  • 40 watchers

About the plugin

Bootstrap Submenu

Bootstrap sub-menus.

Demo image: stickyNavbar.js

Github activity

  • 278 stars
  • 17 watchers

About the plugin

stickyNavbar.js

StickyNavbar.js: fancy sticky navigation jQuery plugin with smart anchor links highlighting.

Demo image: Box Lid Menu

Made by

  • James Lim

Github activity

  • 43 stars
  • 9 watchers

About the plugin

Box Lid Menu

This jQuery plugin creates the box lid effect for navigation menus.

Demo image: stickUp

Github activity

  • 1531 stars
  • 100 watchers

About the plugin

stickUp

StickUp a jQuery Plugin for sticky navigation menus.

Features

  • simple integration
  • the “one pager”
Demo image: scrollNav

Github activity

  • 394 stars
  • 25 watchers

About the plugin

scrollNav

A jQuery plugin for building a scrolling navigation menu.

Demo image: bigSlide.js

Github activity

  • 392 stars
  • 19 watchers

About the plugin

bigSlide.js

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

Demo image: offCanvasMenu

Github activity

  • 150 stars
  • 13 watchers

About the plugin

offCanvasMenu

offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

Demo image: Metismenu

Made by

  • Osman Nuri Okumuş

Github activity

  • 1508 stars
  • 106 watchers

About the plugin

Metismenu

A jQuery menu plugin.

Demo image: jQuery Superfish Dropdown Menu Plugin

Github activity

  • 856 stars
  • 84 watchers

About the plugin

jQuery Superfish Dropdown Menu Plugin

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

Demo image: SlickNav

Github activity

  • 824 stars
  • 66 watchers

About the plugin

SlickNav

Responsive mobile menu jQuery plugin.

Demo image: SmartMenus

Github activity

  • 478 stars
  • 51 watchers

About the plugin

SmartMenus

Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.

Demo image: SlimMenu

Github activity

  • 299 stars
  • 34 watchers

About the plugin

SlimMenu

SlimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

Demo image: jQuery.Dropotron

Github activity

  • 123 stars
  • 15 watchers

About the plugin

jQuery.Dropotron

jquery.dropotron: multilevel dropdown menus for jQuery.

Demo image: Sidr

Made by

  • Alberto Varela

Github activity

  • 2921 stars
  • 154 watchers

About the plugin

Sidr

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. It uses CSS3 transitions in modern browsers and fallbacks into jQuery.animate when they are not supported.

Demo image: Fixed Table of Contents Drop-Down Menu jQuery Plugin

Made by

  • Louis Lazaris

Github activity

  • 53 stars
  • 0 watchers

About the plugin

Fixed Table of Contents Drop-Down Menu jQuery Plugin

A fixed table of contents drop-down menu jQuery plugin. Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.

Demo image: jPanelMenu

Made by

  • Anthony Colangelo

Github activity

  • 956 stars
  • 86 watchers

About the plugin

jPanelMenu

A jQuery plugin that creates a paneled-style menu.

Demo image: visualNav

Github activity

  • 68 stars
  • 8 watchers

About the plugin

visualNav

A jQuery plugin that modifies a navigation menu to highlight/change when the menu’s target smooth scrolls into view.