Collection of free jQuery mega menu code examples and plugins from Codepen, Github and other resources. Update of November 2021 collection. 2 new items.
Related Articles
- jQuery Menus
- jQuery Context Menus
- jQuery Fullscreen Menus
- jQuery Off-Canvas Menus
- jQuery Scrolling Menus
- React Menus
- CSS Menus
Table of Contents:
jQuery Mega Menu Examples
About the code
Mega Dropdown
A responsive and easy to customise mega-dropdown component.
Links
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
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Responsive Mega Menu
Responsive mega menu for mobile view.
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Responsive Mega Menu
Responsive mega menu with flexbox.
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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.
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Mega Menu jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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