Hello Friends, today in this blog you’ll learn how to create Responsive Drop Down Menu Bar Using Only HTML & CSS3.
So in the last blog we created a Responsive Navigation Menu Bar Using Only HTML & CSS & i hope after watching our youtube tutorial you guys now easily create a Responsive Navigation Menu Bar. So today we’ve create the related thing…same responsive menu but with drop down menu which is very imporant in Web Design and it is very simple. If you can create Responsive Navigation Menu then creating a drop down menu is not a big deal.
Video Tutorial of Responsive Drop Down Navigation Menu Bar Using Only HTML & CSS
In the video you’ve seen a Responsive Drop Down Menu. I think you guys can easily create a responsive menu bar so in this tutorial we’ve create the same thing with some changes. When you create a drop down menu you just add <ul> & <li> under the parent <ul> & <li> tag and styling the code using CSS & make it responsive using CSS Media Queries as you can see in the last video or blog.
So, enjoy the tutorial & learn something new today 🙂
Responsive Navigation Drop Down Menu Bar [ SOURCE CODE ]
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Responsive Drop Down Menu Bar</title>
</head>
<body>
<nav>
<div class="logo">Coding Master</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn" />
<ul>
<li><a href="#">Home</a></li>
<li>
<label for="btn-1" class="show">Features+</label>
<a href="#">Features</a>
<input type="checkbox" id="btn-1" />
<ul>
<li><a href="#">Feature 1</a></li>
<li><a href="#">Feature 2</a></li>
<li><a href="#">Feature 3</a></li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services+
</label>
<a href="#">Services</a>
<input type="checkbox" id="btn-2" />
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li>
<label for="btn-3" class="show">More+
</label>
<a href="#">More <span class="fa fa-plus"></span></a>
<input type="checkbox" id="btn-3" />
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #222;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
text-transform: uppercase;
font-size: 25px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li {
float: left;
display: inline-block;
background: #222;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
text-transform: uppercase;
font-weight: 600;
}
nav ul li a:hover{
color: crimson;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
@media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
.show{
display: block;
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 0 20px;
line-height: 70px;
font-weight: 600;
cursor: pointer;
}
.show:hover{
color: crimson;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
}
- Mastering Data Structures & Algorithms: Your Ultimate Roadmap to Success - July 3, 2023
- A Beginner’s Guide to Machine Learning: Key Concepts and Applications - June 28, 2023
- Web Development: A Beginner’s Guide to Getting Started - June 24, 2023
0 Comments