Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a mega menu (full-width dropdown menu in a navigation bar) with HTML and CSS?
The mega menu includes the menus with dropdown menus. The dropdown will have a complete setup for creating rows and columns and adding content like this −
The mega menu i.e., the full-width dropdown menu in a navigation bar appears like this −
On clicking the Projects dropdown menu, the dropdown menu appears −
Set the Navigation Menu
We have set the menu links inside the <nav>
<nav> <a class="links" href="#">Home</a> <a class="links" href="#">About</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> </nav>
Style the Menu and Links
The navigation menu and links are styled like this −
nav {
overflow: hidden;
background-color: rgb(2, 161, 127);
font-family: Arial, Helvetica, sans-serif;
}
nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Full-width Dropdown
Here is our dropdown with full-width. We have set different divs for rows and columns making it a mega dropdown −
<div class="dropdown">
<button class="megaButton">Projects ></button>
<div class="megaContent">
<div class="megaHeader">
<h2>Projects Menu</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>Commercial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
<div class="megaColumn">
<h3>Non-Commerial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
</div>
</div>
</div>
Style the Button and Content for Thedropdown
Let us style the megamenu, including the button, content, etc −
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .megaButton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
background-color: rgb(0, 63, 146);
}
.megaContent {
text-align: center;
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
z-index: 1;
}
.megaContent .megaHeader {
background: rgb(119, 6, 194);
padding: 16px;
color: white;
}
.dropdown:hover .megaContent {
display: block;
}
Style the Column for the Dropdown
We have styled the columns for our mega menu dropdown. The direction is set to left and the links are also styled −
.megaColumn {
float: left;
width: 50%;
padding: 10px;
background-color: rgb(233, 255, 198);
height: 250px;
}
.megaColumn .links {
color: black;
padding: 16px;
margin:10px;
text-decoration: none;
display: block;
text-align: left;
border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
background-color: lightblue;
}
Create a Mega Menu
Example
The following is the code to create a mega menu using HTML and CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
*,*::before,*::after{
box-sizing: border-box;
}
nav {
overflow: hidden;
background-color: rgb(2, 161, 127);
font-family: Arial, Helvetica, sans-serif;
}
nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .megaButton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
background-color: rgb(0, 63, 146);
}
.megaContent {
text-align: center;
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
z-index: 1;
}
.megaContent .megaHeader {
background: rgb(119, 6, 194);
padding: 16px;
color: white;
}
.dropdown:hover .megaContent {
display: block;
}
.megaColumn {
float: left;
width: 50%;
padding: 10px;
background-color: rgb(233, 255, 198);
height: 250px;
}
.megaColumn .links {
color: black;
padding: 16px;
margin:10px;
text-decoration: none;
display: block;
text-align: left;
border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
background-color: lightblue;
}
/*Float reset trick for clearing floats*/
.megaRow:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown">
<button class="megaButton">Projects ></button>
<div class="megaContent">
<div class="megaHeader">
<h2>Projects Menu</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>Commercial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
<div class="megaColumn">
<h3>Non-Commerial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
Updated on: 27-Oct-2023
1K+ Views
Advertisements