A Mega Menu is a multilevel sub-menus of the navigation menu or the parent menu that allow to carry the multi navigation links in a single navigation link.
A drop down menu is a sub-menu of the navigation menu or the parent menu. The sub-menu or the drop down menu will appear on clicking or hovering the parent navigation link. By creating the mega menu and the dropdown menu, it reduces the space occupied by the whole navigation menus.
In this program (Responsive Mega Menu and Dropdown Menu), there is navigation bar at the top of the page, where logo is present at the top-left of the web page and the navigation links are present at the top-right of the web page. Hover effect have been used in every navigation links.
The navigation link which is labeled as dropdown Menu has the dropdown links and the navigation link which is labeled as Mega Menu has an image with multiple links and also sub-links or menus. Hover effect have been used for every sub-menus in the Mega Menu.This program is made responsive by using media query property in CSS. When this webpage is viewed in mobile mode, the navigation links will disappear, instead a bar will appear at the top-right of the webpage.
On clicking the bar, all the navigation links will smoothly slide from the left side with the cross icon on right-top of it. Hover effect have been used in every links. On clicking the navigation link which is labelled as Dropdown Menu and Mega Menu the sub-menus or the sub-links will appear.
The source code of this Responsive Mega Menu and Dropdown Menu is given below, if you want the source code of this program, you can copy it. You can use this Responsive Mega Menu and Dropdown Menu on your projects.
Responsive Mega Menu and Dropdown Menu [Source Code]
To make this website, you would like to make two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
CSS provides style to an HTML page. To form the page attractive and page responsive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #FAD961;
background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
}
nav{
position: fixed;
z-index: 99;
width: 98%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background: #242526;
border-radius:12px;
margin:2px 1%;
}
nav .wrapper{
position: relative;
max-width: 1300px;
padding: 0px 30px;
height: 70px;
line-height: 70px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper .logo a{
color: #f2f2f2;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.wrapper .nav-links{
display: inline-flex;
}
.nav-links li{
list-style: none;
}
.nav-links li a{
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links li a:hover{
background-color: #FAD961;
color:#000;
}
.nav-links .mobile-item{
display: none;
}
.nav-links .drop-menu{
position: absolute;
background: #242526;
width: 180px;
line-height: 45px;
top: 85px;
opacity: 0;
visibility: hidden;
border-radius:0 0 15px 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box{
transition: all 0.3s ease;
top: 70px;
opacity: 1;
visibility: visible;
}
.drop-menu li a{
width: 100%;
display: block;
padding: 0 0 0 15px;
font-weight: 400;
border-radius:0 0 15px 15px;
}
.mega-box{
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
}
.mega-box .content{
background: #242526;
padding: 25px 20px;
display: flex;
width: 100%;
justify-content: space-between;
border-radius:0 0 15px 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.mega-box .content .row{
width: calc(25% - 30px);
line-height: 45px;
}
.content .row img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius:15px;
}
.content .row header{
color: #FAD961;
font-size: 20px;
font-weight: 500;
}
.content .row .mega-links{
margin-left: -40px;
border-left: 1px solid rgba(255,255,255,0.09);
}
.row .mega-links li{
padding: 0 20px;
}
.row .mega-links li a{
padding: 0px;
padding: 0 20px;
color: #d9d9d9;
font-size: 17px;
display: block;
}
.row .mega-links li a:hover{
color:#000;
}
.wrapper .btn{
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.wrapper .btn.close-btn{
position: absolute;
right: 30px;
top: 10px;
}
@media screen and (max-width: 970px) {
.wrapper .btn{
display: block;
}
.wrapper .nav-links{
position: fixed;
height: 100vh;
width: 100%;
max-width: 350px;
top: 0;
left: -100%;
background: #242526;
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
transition: all 0.3s ease;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #242526;
}
::-webkit-scrollbar-thumb {
background: #3A3B3C;
}
#menu-btn:checked ~ .nav-links{
left: 0%;
}
#menu-btn:checked ~ .btn.menu-btn{
display: none;
}
#close-btn:checked ~ .btn.menu-btn{
display: block;
}
.nav-links li{
margin: 15px 10px;
}
.nav-links li a{
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu{
position: static;
opacity: 1;
top: 65px;
visibility: visible;
padding-left: 20px;
width: 100%;
max-height: 0px;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
#showDrop:checked ~ .drop-menu,
#showMega:checked ~ .mega-box{
max-height: 100%;
}
.nav-links .desktop-item{
display: none;
}
.nav-links .mobile-item{
display: block;
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links .mobile-item:hover{
background: #3A3B3C;
}
.drop-menu li{
margin: 0;
}
.drop-menu li a{
border-radius: 5px;
font-size: 18px;
}
.mega-box{
position: static;
top: 65px;
opacity: 1;
visibility: visible;
padding: 0 20px;
max-height: 0px;
overflow: hidden;
transition: all 0.3s ease;
}
.mega-box .content{
box-shadow: none;
flex-direction: column;
padding: 20px 20px 0 20px;
}
.mega-box .content .row{
width: 100%;
margin-bottom: 15px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.mega-box .content .row:nth-child(1),
.mega-box .content .row:nth-child(2){
border-top: 0px;
}
.content .row .mega-links{
border-left: 0px;
padding-left: 15px;
}
.row .mega-links li{
margin: 0;
}
.content .row header{
font-size: 19px;
}
}
nav input{
display: none;
}
.body-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
padding: 0 30px;
}
.body-text div{
font-size: 45px;
font-weight: 600;
}
.body-text div a{
text-decoration: none;
color:#FAD961;
background-color: #242526;
border-radius: 15px;
padding:2px;
font-size: 35px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}Thank you for reading our blog. If you face any problem in creating this Responsive Mega Menu and Dropdown Menu using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team