Hi guys I am back with another fantastic and inspiring project in this project I create a Drop Down Menu using HTML and CSS only I also share a complete source code that you can download and use for free.
NOTE: To stay informed about my new projects, join our WhatsApp and Telegram community and be part of the conversation.” Links are given below.
Drop Down Menu
A drop-down menu is a graphical control element that allows the user to choose one value from a list. When a drop-down menu is inactive, it displays a single value. When activated, it displays a list of values, from which the user may select one.
Drop-down menus are often used in graphical user interfaces (GUIs) to provide a compact way to present a large number of options. They are also commonly used in web pages to allow users to select a value from a list.
There are two main types of drop-down menus: single-select and multiple-select. Single-select drop-down menus allow the user to select only one value from the list. Multiple-select drop-down menus allow the user to select multiple values from the list.
Here are some of the benefits of using drop-down menus:
- They save space on the screen.
- They make it easy for users to select a value from a list.
- They can be used to present a large number of options in a compact way.
Here are some of the drawbacks of using drop-down menus:
- They can be difficult to use for users with disabilities.
- They can be slow to load, especially if the list of options is large.
- They can be confusing if the list of options is not well-organized.
Overall, drop-down menus are a useful graphical control element that can be used to improve the usability of GUIs and web pages. However, it is important to use them wisely and to make sure that they are easy to use for all users.
About This Project
| Created by | Coding Pakistan |
| Languages | HTML / CSS |
| Source Code | GitHub |
| Preview | Take Preview |
| Responsive | Yes |
How To Create a Drop-Down Menu Using HTML and CSS
There are some steps to create this type of Drop-Down Menu Using HTML and CSS that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two files HTML and CSS.
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Drop Down Menu – Source Code
HTML FILE
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0"
/>
<link rel="stylesheet" href="style.css" />
<title>Dropdown 3</title>
</head>
<body>
<div class="dropdown">
<div class="content">
<span class="material-symbols-outlined"> settings </span>
<p>Settings</p>
<span class="material-symbols-outlined"> expand_more </span>
</div>
<button type="button"></button>
<div class="menu">
<a>
<span class="material-symbols-outlined"> lock </span>
<p>Account</p>
</a>
<a>
<span class="material-symbols-outlined"> credit_card </span>
<p>Payments</p>
</a>
<a>
<span class="material-symbols-outlined"> archive </span>
<p>Archive</p>
</a>
</div>
</div>
</body>
</html>
CSS FILE
* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
margin: 0;
height: 100vh;
font-family: "Euclid Circular A", "Poppins";
background: #45494e;
}
.dropdown {
translate: 0 -20px;
position: relative;
cursor: pointer;
}
.dropdown > button {
width: 170px;
height: 60px;
border: 0;
border-radius: 6px;
font-family: inherit;
font-size: 17px;
background: #3c3c3c;
}
.dropdown > .content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #f7f7f7;
}
.dropdown > .content::after {
content: "";
position: absolute;
bottom: 6px;
right: 10%;
width: 80%;
height: 1px;
transform: scaleX(0);
background: rgb(255 255 255 / 30%);
transition: 0.3s;
}
.dropdown:hover > .content::after {
transform: scaleX(1);
}
.dropdown > .content > span:first-child {
font-size: 20px;
}
.dropdown > .content > span:last-child {
margin-left: auto;
}
.dropdown > .content > span:last-child {
transition: 0.3s;
}
.dropdown:hover > .content > span:last-child {
rotate: -180deg;
}
.dropdown > .menu {
position: absolute;
z-index: 1;
top: -6px;
left: 50%;
display: grid;
width: 110%;
padding: 70px 0 6px;
border-radius: 6px;
translate: -50% 0;
visibility: hidden;
opacity: 0;
scale: 0.85;
background: linear-gradient(#ea8d8d, #a890fe);
transition: 0.3s;
}
.dropdown:hover > .menu {
visibility: visible;
opacity: 1;
scale: 1;
}
.dropdown > .menu > a {
display: flex;
align-items: center;
gap: 10px;
color: #f7f7f7;
font-size: 14px;
padding: 0 24px;
}
.dropdown > .menu > a:hover {
background: rgb(0 0 0 / 10%);
}
.dropdown > .menu > a > span {
font-size: 20px;
}
Related Articles
- How to Create Mobile App, Icon Menu
- Netflix Clone Completed the website using HTML and CSS
- Top 5 Mistakes while learning a web development
Conclusion
In this blog post, we have learned how to create a dropdown menu using HTML and CSS. We learned that we can use any element to open the dropdown menu, such as a button, link, or paragraph.
We also learned that we need to use a container element to hold the dropdown content and that we can use CSS to style the dropdown menu to look however we want.
Creating a dropdown menu is a simple way to add navigation to our websites. It can also be used to present a list of options to the user. By following the steps in this blog post, you can create your own dropdown menus in no time.
