Collection of free jQuery mega menu examples and plugins from codepen and other resources. Update of November 2019 collection. 4 new items.

Related Articles

  1. jQuery Menus
  2. jQuery Context Menus
  3. jQuery Fullscreen Menus
  4. jQuery Off-Canvas Menus
  5. jQuery Scrolling Menus
  6. React Menus
  7. CSS Menus

Table of Contents:

  1. jQuery Mega Menu Examples
  2. jQuery Mega Menu Plugins

jQuery Mega Menu Examples

Demo image: Mega Dropdown

Author

  • codyhouse.co

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js,
    jquery.menu-aim.js)

About the code

Mega Dropdown

A responsive and easy to customise mega-dropdown component.

Author

  • Jacob Lett

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Mega Dropdown Menu Navbar

Mega Dropdown Menu Navbar - Bootstrap 4 code snippet example demo.

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js, bootstrap-4-latest.js

Demo image: Responsive Mega Menu

Author

  • Droidadda Inc

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu for mobile view.

Demo image: Responsive Mega Menu

Author

  • Kalpesh Singh

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu with flexbox.

Author

  • Mike Torosian

Made with

  • HTML / CSS / JS

About a code

Flexy Mega Menu

I saw a gif of this style menu on Scout's page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out.

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

Responsive: yes

Dependencies: jquery.js

Author

  • MAHESH AMBURE

Made with

  • HTML / CSS / JS

About a code

Responsive Mega menu with Logo

Responsive mega menu with logo in HTML, CSS and jQuery.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Martin Stanek

Made with

  • HTML / CSS (Less) / JS

About a code

Responsive Bootstrap Mega Menu

With very little effort, you can implement your own Bootstrap mega menu.

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

Responsive: yes

Dependencies: bootstrap.css, bootstrap-dropmenu.css, bootstrap.js, holder.js, jquery.js

Author

  • Arjun Amgain

Made with

  • HTML / CSS / JS

About a code

Responsive Mega Menu

Responsive mega menu with blog, image and drop down.

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

Responsive: yes

Dependencies: animate.css, bootstrap.css, jquery.js

Demo image: Mega Menu Dropdowns with Foundation 5

Author

  • SitePoint

Made with

  • HTML
  • CSS/SCSS (foundation.css)
  • JavaScript (jquery.js, foundation.js)

About the code

Mega Menu Dropdowns with Foundation 5

A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.

Author

  • samir alley

Made with

  • HTML / CSS / JS

About a code

Responsive Mega Menu

Responsive mega navigation in jQuery.

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

Responsive: yes

Dependencies: jquery.js

jQuery Mega Menu Plugins

Author

  • Codehim

Made with

  • HTML / CSS / JS

About a code

hs Mega Menu - jQuery Plugin

hs Menu is a easy to use mega menu plugin that helps you create modern navigation system with amazing features.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Ben Kamens

Made with

  • HTML / CSS / JS

About a code

jQuery-menu-aim

jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js, bootstrap.js