This HTML5 and CSS3 project helps you to create a responsive mega menu. It comes with multi-level dropdowns and mega menus. You can arrange blog posts, navigational links, and brand logo inside the mega menu. Moreover, the navbar menu can be fixed on top on the scroll event by adding the sticky class to menu.
The menu converts into off canvas on mobile devices that can be opened/closed with an animated hamburger button.
How to Create HTML5 CSS3 Responsive Mega Menu
1. First of all, create the HTML structure for the mega menu as follows:
<header class="navbar sticky">
<a href="#" class="logo">Logo</a>
<div class="menu-btn">
<div class="menu-btn__lines"></div>
</div>
<ul class="menu-items">
<li><a href="#" class="menu-item first-item">Home Page</a></li>
<li class="dropdown">
<a href="#" class="menu-item first-item expand-btn">Dropdown Right</a>
<ul class="dropdown-menu sample">
<li><a href="#" class="menu-item">Item 1</a></li>
<li><a href="#" class="menu-item">Item 2</a></li>
<li><a href="#" class="menu-item">Item 3</a></li>
<li class="dropdown dropdown-right">
<a href="#" class="menu-item expand-btn">
Item 4
</a>
<ul class="menu-right sample">
<li><a href="#" class="menu-item">Item 4.1</a></li>
<li><a href="#" class="menu-item">Item 4.2</a></li>
<li><a href="#" class="menu-item">Item 4.3</a></li>
<li><a href="#" class="menu-item">Item 4.4</a></li>
<li><a href="#" class="menu-item">Item 4.5</a></li>
<li><a href="#" class="menu-item">Item 4.6</a></li>
<li><a href="#" class="menu-item">Item 4.7</a></li>
<li><a href="#" class="menu-item">Item 4.8</a></li>
</ul>
</li>
<li><a href="#" class="menu-item">Item 5</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="menu-item first-item expand-btn">Dropdown Left</a>
<ul class="dropdown-menu sample">
<li><a href="#" class="menu-item">Item 1</a></li>
<li><a href="#" class="menu-item">Item 2</a></li>
<li><a href="#" class="menu-item">Item 3</a></li>
<li class="dropdown dropdown-right">
<a href="#" class="menu-item expand-btn">
Item 4
</a>
<ul class="menu-right menu-left sample">
<li><a href="#" class="menu-item">Item 4.1</a></li>
<li><a href="#" class="menu-item">Item 4.2</a></li>
<li><a href="#" class="menu-item">Item 4.3</a></li>
<li><a href="#" class="menu-item">Item 4.4</a></li>
<li><a href="#" class="menu-item">Item 4.5</a></li>
<li><a href="#" class="menu-item">Item 4.6</a></li>
<li><a href="#" class="menu-item">Item 4.7</a></li>
<li><a href="#" class="menu-item">Item 4.8</a></li>
</ul>
</li>
<li><a href="#" class="menu-item">Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="menu-item first-item expand-btn">Mega Menu</a>
<div class="mega-menu sample">
<div class="content">
<div class="col">
<section>
<div class="menu-title">Category 1</div>
<a href="#" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=1" alt="Random Image" /></span></a>
<p>Very beautiful.</p>
</section>
</div>
<div class="col">
<section>
<div class="menu-title">Category 2</div>
<ul class="mega-links">
<li><a href="#" class="menu-item">Item with a long menu name 1</a></li>
<li><a href="#" class="menu-item">Item with a long menu name 2</a></li>
<li><a href="#" class="menu-item">Item with a long menu name 3</a></li>
<li><a href="#" class="menu-item">Item with a long menu name 4</a></li>
<li><a href="#" class="menu-item">Item with a long menu name 5</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<div class="menu-title">Category 3</div>
<ul class="mega-links">
<li><a href="#" class="menu-item">Item 1</a></li>
<li><a href="#" class="menu-item">Item 2</a></li>
<li><a href="#" class="menu-item">Item 3</a></li>
<li><a href="#" class="menu-item">Item 4</a></li>
<li><a href="#" class="menu-item">Item 5</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<div class="menu-title">Category 4</div>
<ul class="mega-links">
<li><a href="#" class="menu-item">Item 1</a></li>
<li><a href="#" class="menu-item">Item 2</a></li>
<li><a href="#" class="menu-item">Item 3</a></li>
<li><a href="#" class="menu-item">Item 4</a></li>
<li><a href="#" class="menu-item">Item 5</a></li>
</ul>
</section>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="menu-item first-item expand-btn">Blog</a>
<div class="mega-menu blog sample">
<div class="content">
<div class="col">
<a href="#" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=2" alt="Random Image" /></span></a>
<div class="menu-title">Your Title</div>
<p>
I looked at a lot of menus, something is wrong everywhere.
In this menu, in my opinion, I took into account all the shortcomings.
Simple and clear code in pure JS. No Jquery, Bootstrap and other libraries are closed when you click outside the area and press Esc.
</p>
<a href="#" class="read-more">read more</a>
</div>
<div class="col">
<a href="#" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=3" alt="Random Image" /></span></a>
<div class="menu-title">Your Title</div>
<p>
I looked at a lot of menus, something is wrong everywhere.
In this menu, in my opinion, I took into account all the shortcomings.
Simple and clear code in pure JS. No Jquery, Bootstrap and other libraries are closed when you click outside the area and press Esc.
</p>
<a href="#" class="read-more">read more</a>
</div>
<div class="col">
<a href="#" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=4" alt="Random Image" /></span></a>
<div class="menu-title">Your Title</div>
<p>
I looked at a lot of menus, something is wrong everywhere.
In this menu, in my opinion, I took into account all the shortcomings.
Simple and clear code in pure JS. No Jquery, Bootstrap and other libraries are closed when you click outside the area and press Esc.
</p>
<a href="#" class="read-more">read more</a>
</div>
<div class="col">
<a href="#" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=5" alt="Random Image" /></span></a>
<div class="menu-title">Your Title</div>
<p>
I looked at a lot of menus, something is wrong everywhere.
In this menu, in my opinion, I took into account all the shortcomings.
Simple and clear code in pure JS. No Jquery, Bootstrap and other libraries are closed when you click outside the area and press Esc.
</p>
<a href="#" class="read-more">read more</a>
</div>
</div>
</div>
</li>
<li><a href="#" class="menu-item first-item">Contact Us</a></li>
</ul>
</header>
<main>
<div class="container">
<h1>Multi-Level Mega Menu + Dropdown Menu</h1>
<br>
<p>
I looked at a lot of menus, something is wrong everywhere.
In this menu, in my opinion, I took into account all the shortcomings.
Simple and clear code in pure JS. No Jquery, Bootstrap and other libraries are closed when you click outside the area and press Esc.
</p>
<br>
<p>;)</p>
<br>
<br>
<p>Without Jquery</p>
<br>
<br>
<p>Full responsibility</p>
<br>
<br>
<p>Closes when clicked outside the area</p>
<br>
<br>
<p>Closes when the Esc key is pressed</p>
</div>
</main>
<div class="overlay"></div>
<script src="script.js"></script>
2. Style the menu using the following CSS styles:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cd__main{
display: block !important;
}
body {
font-family: Montserrat, sans-serif;
background: linear-gradient(-45deg, #9c27b0, #673ab7);
background-size: 100% 200%;
color: #000000;
min-height: 100vh;
font-size: 14px;
}
/* navbar */
.navbar {
background: #ffffff;
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60px;
-webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
}
.navbar .logo {
text-decoration: none;
color: #122f48;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
}
/* nav menu button */
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 2;
}
.navbar .menu-btn__lines::before,
.navbar .menu-btn__lines::after {
content: "";
position: absolute;
}
.navbar .menu-btn__lines,
.navbar .menu-btn__lines::before,
.navbar .menu-btn__lines::after {
width: 1.5rem;
height: 0.1rem;
background: #132f48;
transition: all 0.4s ease-in-out;
}
.navbar .menu-btn__lines::before {
transform: translateY(-0.5rem);
}
.navbar .menu-btn__lines::after {
transform: translateY(0.5rem);
}
.navbar .menu-items {
display: flex;
align-items: center;
}
.navbar ul li {
list-style: none;
transition: 0.3s ease;
}
.navbar ul li .arrow {
transition: all 0.3s ease-out;
}
.navbar ul li a {
text-decoration: none;
color: #112f48;
}
/* dropdown menu */
.navbar .dropdown {
position: relative;
}
.expand-btn:after {
content: "▼";
opacity: 0.4;
margin-left: 6px;
margin-right: 8px;
}
.navbar .dropdown-menu,
.menu-right {
position: absolute;
background: #e9ecef;
width: 190px;
line-height: 30px;
border-radius: 0 0 5px 5px;
top: 65px;
border-top: 1px solid white;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
-webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
}
.navbar .menu-right {
top: 0;
left: 100%;
}
.navbar .dropdown-menu,
.menu-left {
left: unset;
right: 0;
}
.navbar .menu-left {
left: -100%;
}
.navbar .menu-item {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0.5rem 1.5rem;
font-size: 14px;
}
.navbar .menu-item:hover {
color: #ff5722;
}
.menu-item.first-item {
padding: 1.5rem 1rem;
}
.navbar .dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
.navbar .dropdown-right:hover .menu-right {
left: 100%;
opacity: 1;
visibility: visible;
}
.navbar .dropdown-right:hover .menu-left {
left: -100%;
}
/* mega menu */
.navbar .mega-menu {
position: absolute;
left: 0;
width: 100vw;
top: 65px;
border-top: 1px solid #ffffff;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;
}
.mega-menu .content {
background: #e9ecef;
padding: 1rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
width: 100%;
justify-content: space-between;
-webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
}
.blog .content {
grid-template-columns: repeat(4, 1fr);
}
.content .col {
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 3rem;
}
.content .col .img-wrapper {
display: block;
position: relative;
width: 100%;
height: 20vw;
overflow: hidden;
}
.content .col .img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.content .col img {
width: 100%;
transition: transform 0.3s ease-in-out;
}
.content .col .img-wrapper:hover img {
transform: scale(1.1);
}
.content .col .menu-title {
color: #ff5722;
font-size: 1.2rem;
line-height: 3rem;
font-weight: bold;
}
.content .col p {
line-height: 1.2rem;
margin-top: 5px;
color: #112f48;
}
.content .col .mega-links {
border-left: 1px solid #3c3c3c;
}
.content .col .read-more {
font-size: 16px;
display: flex;
padding-top: 1rem;
color: #03a9f4;
transition: color 0.3s ease;
justify-content: flex-end;
padding-right: 10px;
}
.col .mega-links li,
.col .mega-links li a {
padding: 0 1rem;
}
.menu-items li:hover .mega-menu {
opacity: 1;
visibility: visible;
}
.content .col .read-more:hover {
color: #ff5722;
}
/* container */
.container {
margin: 100px auto auto;
padding: 0 15px;
max-width: 1200px;
text-align: center;
}
.container p {
color: #ffffff;
}
h1 {
font-weight: 700;
line-height: 10vw;
color: #ffffff;
text-transform: uppercase;
}
/* animation menu hamburger */
.menu-btn.open .menu-btn__lines {
transform: translateX(1rem);
background: transparent;
}
.menu-btn.open .menu-btn__lines::before {
transform: rotate(45deg) translate(-0.5rem, 0.5rem);
background: #132f48;
}
.menu-btn.open .menu-btn__lines::after {
transform: rotate(-45deg) translate(-0.5rem, -0.5rem);
background: #132f48;
}
/* Responsive style */
@media screen and (max-width: 1024px) {
.navbar {
padding: 10px 20px;
}
.overflow {
overflow: hidden;
}
.overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 500;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.overlay--active {
opacity: 1;
visibility: visible;
}
.menu-btn {
display: flex;
}
.navbar .menu-items {
position: fixed;
height: 100%;
max-height: initial;
overflow-y: auto;
width: 80%;
top: 65px;
left: 0;
background: #fcfcfc;
display: block;
transform: translateX(-100vh);
transition: 0.3s ease-out;
padding-bottom: 100px;
}
.menu-items.open {
transform: translateY(0);
}
.menu-items li:first-child {
margin-top: 20px;
}
.menu-items li a {
padding: 10px 1rem;
display: block;
font-size: 18px;
}
.menu-items .dropdown-right .right-arrow {
transform: rotate(90deg);
}
.menu-item.first-item {
padding: 1rem 1rem;
}
/* DROPDOWN, MEGA MENUS */
.menu-items .dropdown-menu,
.menu-items .menu-right,
.menu-items .mega-menu {
position: static;
opacity: 1;
top: 4rem;
visibility: visible;
margin-left: -18px;
width: auto;
max-height: 0;
transform: scaleX(0);
transform-origin: left;
overflow: hidden;
transition: all 0.5s ease;
}
.menu-items .dropdown-menu,
.menu-items .menu-right {
padding-left: 1rem;
width: 102%;
margin-left: -10px;
}
.menu-items .mega-menu .col {
padding-left: 1rem;
}
.expand-btn.open + .sample {
max-height: 100%;
transform: scaleZ(1);
}
.expand-btn.open + .blog.sample {
max-height: 100%;
transform: scaleZ(1);
max-width: fit-content;
}
.navbar .sample {
border-top: none;
}
.sample li {
margin: 0;
}
.sample li:last-child {
border-bottom: none;
}
.sample li a {
font-size: 1rem;
}
.mega-menu .content {
grid-template-columns: auto;
padding: 1rem 1rem 0 1rem;
}
.mega-menu .content .col {
width: 100%;
padding-top: 1rem;
margin-bottom: 0.5rem;
}
.col .mega-links li,
.col .mega-links li a {
padding: 0 0.5rem;
}
.content .col .mega-links {
border-left: 0;
padding-left: 0.5rem;
}
.col .mega-links li {
margin: 0;
}
}
3. Finally, add the following JavaScript function before closing the body tag and done.
const overlay = document.querySelector(".overlay");
const body = document.querySelector("body");
const menuBtn = document.querySelector(".menu-btn");
const menuItems = document.querySelector(".menu-items");
const expandBtn = document.querySelectorAll(".expand-btn");
function toggle() {
// disable overflow body
body.classList.toggle("overflow");
// dark background
overlay.classList.toggle("overlay--active");
// add open class
menuBtn.classList.toggle("open");
menuItems.classList.toggle("open");
}
menuBtn.addEventListener("click", (e) => {
e.stopPropagation();
toggle();
});
window.onkeydown = function (event) {
const key = event.key; // const {key} = event; in ES6+
const active = menuItems.classList.contains("open");
if (key === "Escape" && active) {
toggle();
}
};
document.addEventListener("click", (e) => {
let target = e.target,
its_menu = target === menuItems || menuItems.contains(target),
its_hamburger = target === menuBtn,
menu_is_active = menuItems.classList.contains("open");
if (!its_menu && !its_hamburger && menu_is_active) {
toggle();
}
});
// mobile menu expand
expandBtn.forEach((btn) => {
btn.addEventListener("click", () => {
btn.classList.toggle("open");
});
});
That’s all! hopefully, you have successfully created a responsive mega menu. If you have any questions or suggestions, feel free to comment below.
