How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS

December 20, 2020

100

How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS ?

Hello coder, Today in this blog you’ll learn how to create an Responsive Mega Menu and Dropdown Menu Using by HTML & CSS. Earlier I have shared a blog on how to create a Glowing Effect on Social Media Buttons. And now I’m going to create an Awesome Responsive Mega Menu and Drop down Menu.

A mega menu is a drop-down menu with multi-level nav links that allows you to carry your website’s navigation into a single menu. A mega menu lets the user or content viewers to get information about website content through the main menu.

In this program [Responsive Mega Menu and Dropdown Menu], there is navigation or navbar on the top of the webpage and it contains a logo on the left side and five nav items/links on the right side. One nav link has a dropdown menu and another one has a mega menu and it only shows when you hover on the parent nav link.

Responsive Menu and Dropdown Menu (Source Code)

To create this program First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program…

HTML SOURCE:

<!DOCTYPE html><!– Created By Theinfowave –><head>            <title>Responsive Mega Menu</title>    <link rel=”stylesheet” href=”style.css”>    </head>  </p><br /><br />
<nav><br /><br />
<div><br /><br />
<div><a href=”https://infobing.com/#”>Theinfowave</a></div><br /><br />
<ul>        <label for=”close-btn”><i></i></label>        </p><br /><br />
<li><a href=”https://infobing.com/#”>Home</a></li><br /><br />
<li><a href=”https://infobing.com/#”>About</a></li><br /><br />
<li>          <a href=”https://infobing.com/#”>Dropdown Menu</a>                    <label for=”showDrop”>Dropdown Menu</label><br /><br />
<ul><br /><br />
<li><a href=”https://infobing.com/#”>Drop menu 1</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Drop menu 2</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Drop menu 3</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Drop menu 4</a></li><br /><br />
</ul><br /><br />
</li><br /><br />
<li>          <a href=”https://infobing.com/#”>Mega Menu</a>                    <label for=”showMega”>Mega Menu</label><br /><br />
<div><br /><br />
<div><br /><br />
<div>                 <img src=”http://www.infobing.com/b.jpg” alt=”” />              </div><br /><br />
<div><br /><br />
<header>Design Services</header><br /><br />
<ul><br /><br />
<li><a href=”https://infobing.com/#”>Graphics</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Vectors</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Business cards</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Custom logo</a></li><br /><br />
</ul></div><br /><br />
<div><br /><br />
<header>Email Services</header><br /><br />
<ul><br /><br />
<li><a href=”https://infobing.com/#”>Personal Email</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Business Email</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Mobile Email</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Web Marketing</a></li><br /><br />
</ul></div><br /><br />
<div><br /><br />
<header>Security services</header><br /><br />
<ul><br /><br />
<li><a href=”https://infobing.com/#”>Site Seal</a></li><br /><br />
<li><a href=”https://infobing.com/#”>VPS Hosting</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Privacy Seal</a></li><br /><br />
<li><a href=”https://infobing.com/#”>Website design</a></li><br /><br />
</ul></div><br /><br />
</p></div><br /><br />
</p></div><br /><br />
</li><br /><br />
<li><a href=”https://infobing.com/#”>Feedback</a></li><br /><br />
</ul><br /><br />
<p>      <label for=”menu-btn”><i></i></label>    </div><br /><br />
</nav><br /><br />
<div><br /><br />
<div>Responsive Dropdown and Mega Menu</div><br /><br />
<div>using only HTML & CSS</div><br /><br />
</p></div><br /><br />
<p>

You May Also Like:

CSS SOURCE:

@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; } nav{   position: fixed;   z-index: 99;   width: 100%;      background: #242526; } 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: #3A3B3C; } .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;   box-shadow: 0 6px 10px rgba(0,0,0,0.15); } .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: 0px; } .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;   box-shadow: 0 6px 10px rgba(0,0,0,0.15); } .mega-box .content .row{   width: calc(25% – 30px);   line-height: 45px; } .content .row img{   width: 100%;   height: 100%;   object-fit: cover; } .content .row header{   color: #f2f2f2;   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: #f2f2f2; } .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: 70%;   left: 50%;   transform: translate(-50%, -50%);   width: 100%;   text-align: center;   padding: 0 30px; } .body-text div{   font-size: 45px;   font-weight: 600; }

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated.

Previous articleSocial Media Buttons with Hover Animation Using HTML & CSS

Next articleTop 6 Brain Training Apps for University Students

How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS

How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS ?

Related Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

LEAVE A REPLY Cancel reply

Latest Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

Navjot Singh Sidhu gets 1-year jail

Zara Phythian: ‘Dr Strange’ actress jailed for sexual abuse of teen girl

How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS

How To Make Responsive Mega Menu and Dropdown Menu Using HTML & CSS ?

Related Articles

LEAVE A REPLY Cancel reply

Stay Connected

Latest Articles