Collection
Post cover

Best 12 jQuery Mega Menus

Collection of free jQuery mega menu examples and plugins from codepen and other resources.

Post cover

Mega Dropdown

Author: codyhouse.co

Links: tutorial, demo

Made with: HTML; CSS; JavaScript (jquery.js,
jquery.menu-aim.js)

A responsive and easy to customise mega-dropdown component.

Bootstrap 4 Mega Dropdown Menu Navbar

Author: Jacob Lett

Links: demo and code

Made with: HTML / CSS / JS

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

Post cover

Responsive Mega Menu

Author: Droidadda Inc

Links: demo and code

Made with: HTML; CSS; JavaScript (jquery.js)

Responsive mega menu for mobile view.

Post cover

Responsive Mega Menu

Author: Kalpesh Singh

Links: demo and code

Made with: HTML; CSS; JavaScript (jquery.js)

Responsive mega menu with flexbox.

Flexy Mega Menu

Author: Mike Torosian

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive Mega menu with Logo

Author: MAHESH AMBURE

Links: demo and code

Made with: HTML / CSS / JS

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

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

Responsive: yes

Dependencies: jquery.js

Responsive Bootstrap Mega Menu

Author: Martin Stanek

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Responsive Mega Menu

Author: Arjun Amgain

Links: demo and code

Made with: HTML / CSS / JS

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

Post cover

Mega Menu Dropdowns with Foundation 5

Author: SitePoint

Links: demo and code

Made with: HTML; CSS/SCSS (foundation.css); JavaScript (jquery.js, foundation.js)

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.

Responsive Mega Menu

Author: samir alley

Links: demo and code

Made with: HTML / CSS / JS

Responsive mega navigation in jQuery.

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

Responsive: yes

Dependencies: jquery.js

hs Mega Menu - jQuery Plugin

Author: Codehim

Links: github page, home page

Made with: HTML / CSS / JS

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

jQuery-menu-aim

Author: Ben Kamens

Links: guthub page

Made with: HTML / CSS / JS

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback