111 jQuery Menus

About a code

Menu

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

Responsive: yes

Dependencies: -

About a code

Navigation PageDesign

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

Responsive: yes

Dependencies: -

About a code

Creative Menu Hover Effect

A menu with a creative hover function showing an image when a link is hovered.

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

Responsive: yes

Dependencies: unicons.css, jquery-ui.js

About a code

Spinning Donut Menu

Top right menu icon opens to reveal a spinning donut with icons for different pages. Each page has a different color and the header "bleeds" to match.

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

Responsive: no

Dependencies: bootstrap.css, material-icons.css, bootstrap.js

About a code

Navigation Concept

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

Responsive: no

Dependencies: -

About a code

Animated Menu

Animated CSS menu with little jQuery.

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

Responsive: yes

Dependencies: -

About a code

Just Another Nav

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

Responsive: no

Dependencies: -

About a code

Menu Effect

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

Responsive: yes

Dependencies: bootstrap.css

About a code

Hamburger Menu Interaction

Placed hamburger menu in the bottom right corner.

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

Responsive: yes

Dependencies: jquery.js

About a code

GSAP: Cursor Hover Effect

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

Responsive: no

Dependencies: tweenmax.js

About a code

Pasta Menu (GSAP Animation)

Pasta shapes really serve well as menu icons.

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

Responsive: yes

Dependencies: simple-line-icons.css, gsap.js, splitting.js

About a code

Full Screen Nav

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

Responsive: yes

Dependencies: font-awesome.js

About a code

Full Screen Menu

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

Responsive: yes

Dependencies: -

About a code

Full Page Nav Hand Grab

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

Responsive: yes

Dependencies: -

About a code

Full-Page Navigation

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

Responsive: yes

Dependencies: anime.js

About a code

Full Page Nav

jQuery full page navigation.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: splitting.js, gsap.js

About a code

Sliding Page Navigation

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

Responsive: no

Dependencies: -

About a code

Nav Concept

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

Responsive: yes

Dependencies: -

About a code

Slidey Nav

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

Responsive: no

Dependencies: -

About a code

Menu

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

Responsive: no

Dependencies: font-awesome.css

About a code

Floating Action Button Menu

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

Responsive: no

Dependencies: -

About a code

Toggle Menu

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

Responsive: no

Dependencies: ionicons.js, bootstrap.js

About a code

zeynep.js

A lightweight multi-level jQuery side menu plugin.

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

Responsive: no

Dependencies: zeynep.css, zeynep.js

About a code

Mobile Nav Bar

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

Responsive: yes

Dependencies: jquery.js

About a code

Uber-like Navigation

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

Responsive: no

Dependencies: jquery.js, tweenmax.js

About a code

Off Canvas Nav

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

Responsive: yes

Dependencies: -

About a code

Responsive Menu Scroll Left

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

Responsive: yes

Dependencies: font-awesome.css, jquery.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

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

About a code

Menu

Horizontal jQuery menu.

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

Responsive: yes

Dependencies: jquery.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

About a code

Hamburger Menu

CSS and jQuery hamburger menu.

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

Responsive: no

Dependencies: jquery.js

About a code

Navigation

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

Responsive: yes

Dependencies: jquery.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

About a code

The Rad Grad Nav

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

Responsive: no

Dependencies: jquery-ui.css, tweenmax.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

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

About a code

Slide Out Navigation Menu

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

Responsive: yes

Dependencies: jquery.js

About a code

Menu Interaction

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

Responsive: no

Dependencies: jquery.js, feather.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

About a code

Animated Full Screen Overlay Navigation GSAP

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

Responsive: yes

Dependencies: font-awesome.css, tweenmax.js

About a code

Perspective Split Text Menu Hover

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

Responsive: no

Dependencies: -

About a code

3D Cube Menu

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

Responsive: yes

Dependencies: bootstrap.css

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

About a code

3D Rotating Hidden Menu with Sliding Bar

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

Responsive: yes

Dependencies: font-awesome.css

About a code

Fancy Toggle Menu

A fancy toggle menu to edit quickly posts on websites.

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

Responsive: no

Dependencies: -

About a code

NavMenu

Expandble/collapsable navigational menu with jQuery.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Fullscreen Menu with Flexbox & jQuery

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

Responsive: yes

Dependencies: font-awesome.css

About a code

Dropdown Menu jQuery

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

Responsive: no

Dependencies: -

About a code

iOS Style Infinite Level - Mobile Sliding Menu

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

Responsive: no

Dependencies: -

About a code

Material Flex Header

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

Responsive: no

Dependencies: font-awesome.css

About a code

Hamburger Slide Accordion Menu

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

Responsive: yes

Dependencies: -

About a code

Circular Navigation Concept

A new navigation concept.

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

Responsive: yes

Dependencies: -

About a code

Material Design FAB with Animated Flyout Nav

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

Responsive: yes

Dependencies: -

About a code

Apple Menu Search Animation

Apple website menu search animation.

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

Responsive: no

Dependencies: font-awesome.css, animate.css

About a code

Real Fullscreen Navigation

A full viewport responsive navigation with jQuery.

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

Responsive: yes

Dependencies: -

About a code

jQuery Staggered Animation Dropdown Menu

This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu. Rather than applying the delay in CSS/SASS files based on nth-child(), we inject the delay via jQuery on document ready. This pattern can be used in a render function for Meteor or within Angular/React. This could be done at mouseenter(), but there could be a JavaScript delay in relation to instant CSS hover. By having it in the page render, it ensures it up to date whenever the user hovers. The function simply counts the number of children in the dropdown menu and applies a delay based on it's index value within the loop. If you have dropdown headers, dividers or links, you'll need to update it to traverse the DOM. Easiest way is by console.log(index) within the each funciton to ensure it's counting the children properly.

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

Responsive: no

Dependencies: -

About a code

Animated Navigation

Animated mobile navigation created in JavaScript using Greensock.

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

Responsive: yes

Dependencies: tweenmax.js

About a code

Floating Circular Menu

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

Responsive: yes

Dependencies: font-awesome.css

About a code

Bubble Menu

Just a simple JavaScript menu.

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

Responsive: no

Dependencies: -

About a code

Fixed Navigation Sidebar

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

Responsive: no

Dependencies: bootstrap.css, linearicons.js, bootstrap.js

About a code

Mobile Menu Animation

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

Responsive: no

Dependencies: -

About a code

Vertical Toggle Menu

Animated hamburger and vertical menu.

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

Responsive: no

Dependencies: font-awesome.css

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

About a code

Circle Menu

A nice menu effect that when clicked will pop items around and when clicked will animate the button to circle around and then change the background color to the one selected.

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

Responsive: no

Dependencies: -

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

About a code

Mobile Menu Design #3

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

Responsive: no

Dependencies: -

About a code

Mobile Menu #2

Mobile menu animation.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Responsive Navbar

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

Responsive: yes

Dependencies: font-awesome.css

About a code

A Clean Navigation Slider

This is a very clean navigation with a cool slider in jQuery.

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

Responsive: no

Dependencies: -

About a code

Toggle Menu

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

Responsive: no

Dependencies: font-awesome.css

About a code

Ink Drop Menu

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

Responsive: yes

Dependencies: material-design-iconic-font.css,

About a code

Simple jQuery Slide Menu

Very simple jQuery slide menu.

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

Responsive: no

Dependencies: -

About a code

Menu

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

Responsive: no

Dependencies: -

About a code

Page Tilt Effect

Effect simulating a tilting sheet of paper to reveal the navigation menu.

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

Responsive: no

Dependencies: -

About a code

Secret UI Project

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

Responsive: no

Dependencies: ionicons.css, animate.css

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

About a code

Responsive Navigation Ideas

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

Responsive: no

Dependencies: -

About a code

Elastic SVG Sidebar Material Design

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

Responsive: no

Dependencies: -

About a code

Fullscreen Menu #2

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

Responsive: yes

Dependencies: animate.css, wow.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

About a code

Fullscreen Hamburger Menu

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

Responsive: no

Dependencies: -

About a code

Fixed Flyout/Off-Canvas Navigation

A responsive fixed menu that's always right there.

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

Responsive: yes

Dependencies: -

About a code

Bounce Menu

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

Responsive: no

Dependencies: -

About a code

Responsive Navigation Multilevel

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

Responsive: yes

Dependencies: -

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

About a code

Fullscreen Overlay Responsive Navigation Menu jQuery

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

Responsive: yes

Dependencies: tweenmax.js

About a code

Sidebar Menu

Sidebar menu with sub-menu using CSS & jQuery.

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

Responsive: yes

Dependencies: font-awesome.css

About a code

AwesomeMenu

An awesome toggle menu created with HTML,CSS,jQuery,font-awesome.

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

Responsive: yes

Dependencies: font-awesome.css

About a code

SnazzyMenu.js

Responsive, lightweight, mega menu plugin written in jQuery and SCSS.

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

Responsive: yes

Dependencies: snazzymenu.css, snazzymenu.js

About a code

jQuery Context Menu

JQuery based context menus be like Material Design.

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

Responsive: yes

Dependencies: font-awesome.css, jquery.context-menu.css

Hiraku.js

Hiraku.js - jQuery offcanvas menu plugin.

Sidebar Menu

Sidebar menu jQuery component base on AdminLTE.

About a code

HC Off-Canvas Nav

JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.

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

Responsive: yes

Dependencies: hc-offcanvas-nav.css, hc-offcanvas-nav.js

Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Slinky

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

Tendina

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

Bootstrap Submenu

Bootstrap sub-menus.

stickyNavbar.js

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

Box Lid Menu

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

stickUp

StickUp a jQuery Plugin for sticky navigation menus.

• simple integration
• the "one pager"

Metismenu

A jQuery menu plugin.

jQuery Superfish Dropdown Menu Plugin

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

SlickNav

Responsive mobile menu jQuery plugin.

SmartMenus

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

SlimMenu

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

jQuery.Dropotron

jquery.dropotron: multilevel dropdown menus for jQuery.

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.

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.

jPanelMenu

A jQuery plugin that creates a paneled-style menu.