 |
| Responsive drop-down menu using html and css |
In this article, we given a Responsive drop-down menu using html and css as a project. Dropdown menu is used on website for showing menu items. Dropdown menu is the sub menu items of main menu item that contains the sub menu information as given. It can be used on website to show the items. It is created using html and css with responsive design, so you can use the given code to create dropdown menu on your website.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Responsive drop-down menu using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Dropdown-menu.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Responsive drop-down menu using html and css source code
Here we given a html and css source code of Responsive drop-down menu project as given -
HTML
In html, we created a header section where we added a list items for menu in div tag. To create dropdown menu,we added sub menu items into main menu. We added list items as "Home", "Web dev.", "About" and "Contact". In web dev list item, we added sub items as "HTML", "CSS" and "JS". Linked css file to add styling to the html structure code. Copy the given html code and paste it into style.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Dropdown Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Web dev</a>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JS</a>
</div>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>CSS
In CSS code, we added a postion and styling to the elements. Added a color, background-color, position and other properties for proper design. Also, we added a responsiveness to the dropdown menu for all screens. This project design changes as screen like when user open in desktop, then it seems as horizontal and when user open in smartphone, then it seems as vertical menu. Copy the given css code and paste it into style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.navbar {
background-color: #2a6be4;
padding: 10px 20px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.navbar ul li {
position: relative;
margin-right: 20px;
}
.navbar ul li a {
text-decoration: none;
color: white;
padding: 10px 15px;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#2a6be4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 100%;
left: 0;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
animation: fadeInDown 0.5s ease forwards;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
align-items:center;
}
.navbar ul li {
margin: 10px 0;
position: static;
text-align: center;
.dropdown-content {
position: static;
display: none;
background-color: #2a6be4;
box-shadow: none;
}
.dropdown:hover .dropdown-content {
display: block;
animation: none;
}
.dropdown .dropdown-content {
width: auto;
}
.dropdown:hover .dropdown-content {
display: block;
animation: none;
}
}
}Output
Check this output of Responsive drop-down menu -
Also see this -
Hope this helps you to know about Responsive drop-down menu using html and css with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects