Post thumbnail: 7 CSS Mega Menu

7 CSS Mega Menu

Collection of HTML and CSS mega menu with little JavaScript.

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.

Demo image: Magical Mobile Mega Menu

Author

  • tiffany choong

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel

About the code

Magical Mobile Mega Menu

Mega menu for mobile with little JavaScript.

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.

Demo image: Sexy Flexy Mega Menu

Author

  • Mike Torosian

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Sexy 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. - Mike Torosian

Demo image: Responsive Mega Menu

Author

  • Arjun Amgain

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu with blog, images and drop down.

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.

Back to top