Hello readers, Today in this blog you’ll learn how to create a Minimal Dropdown Menu Bar with Submenu in HTML & CSS only. Previously I have shared a Minimal Navigation Menu Bar using CSS but there is no submenu or drop menu features. So now it’s time to create a Dropdown Menu.
A drop-down menu (sometimes called a pull-down menu or list) is a graphical control element designed to help visitors find specific pages, contents, or features on your website. Clicking or hovering on a top-level menu heading indicates a list of options to the dropdown menu.
At first, on the webpage, there is only a small menu bar or navbar, but when you clicked on that menu bar then the menu list is sliding down and visible. Those submenus or drop menus are hidden at first and when you clicked on their parent menu item then the drop list is shown. I’ve also added a simple hover color on the list as you can see in the image.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Minimal Drop-down Menu Bar with Submenu using HTML & CSS).
Video Tutorial of Minimal Dropdown Menu Bar or Navbar
If you like this Dropdown Menu Bar and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create this type of minimal navbar or menu. I hope after watching this video tutorial, you’ve understood what is the actual codes and concepts behind creating this type of design. You can also easily use this program on your websites and projects.
You might like this:
Dropdown Menu Bar using HTML & CSS [Source Codes]
To create this program (Minimal Drop-down Menu Bar with Submenu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. 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>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Drop-down Menu CSS3</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label for="btn" class="button">Drop down
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn">
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<label for="btn-2" class="first">Features
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-2">
<ul>
<li><a href="#">Pages</a></li>
</ul>
</li>
<li>
<label for="btn-3" class="second">Services
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-3">
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">App Design</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<!-- This code used to rotate drop icon(-180deg).. -->
<script>
$('nav .button').click(function(){
$('nav .button span').toggleClass("rotate");
});
$('nav ul li .first').click(function(){
$('nav ul li .first span').toggleClass("rotate");
});
$('nav ul li .second').click(function(){
$('nav ul li .second span').toggleClass("rotate");
});
</script>
</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;
box-sizing: border-box;
user-select: none;
font-family: 'Poppins', sans-serif;
}
nav{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background: #1b1b1b;
width: 400px;
line-height: 40px;
padding: 8px 25px;
border-radius: 5px;
}
nav label{
color: white;
font-size: 22px;
font-weight: 500;
display: block;
cursor: pointer;
}
.button span{
float: right;
line-height: 40px;
transition: 0.5s;
}
.button span.rotate{
transform: rotate(-180deg);
}
nav ul{
position: absolute;
background: #1b1b1b;
list-style: none;
top: 75px;
left: 0;
width: 100%;
border-radius: 5px;
display: none;
}
[id^=btn]:checked + ul{
display: block;
}
nav .menu:before{
position: absolute;
content: '';
height: 20px;
width: 20px;
background: #1b1b1b;
right: 20px;
top: -10px;
transform: rotate(45deg);
z-index: -1;
}
nav ul li{
line-height: 40px;
padding: 8px 20px;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
font-size: 18px;
}
nav ul li a{
color: white;
text-decoration: none;
font-size: 18px;
display: block;
}
nav ul li a:hover,
nav ul li label:hover{
color: cyan;
}
nav ul ul{
position: static;
}
nav ul ul li{
line-height: 30px;
padding-left: 30px;
border-bottom: none;
}
nav ul ul li a{
color: #e6e6e6;
font-size: 17px;
}
nav ul li span{
font-size: 20px;
float: right;
margin-top: 10px;
padding: 0 10px;
transition: 0.5s;
}
nav ul li span.rotate{
transform: rotate(-180deg);
}
input{
display: none;
}
That’s all, now you’ve successfully created a Minimal Drop-down Menu Bar with Submenu using HTML & CSS. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
