Introduction:
Dropdown menus are essential for building interactive and user-friendly interfaces, especially for navigations or quick actions. In this tutorial, you’ll learn how to create a functional dropdown menu with HTML, CSS, and JavaScript.
Things You Will Learn:
- Setting up the basic project structure
- Creating HTML elements for the dropdown
- Styling the dropdown menu with CSS
- Using JavaScript to control dropdown behavior
- Adding event listeners for an interactive experience
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ‘Custom Dropdown menu’. Within this folder we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Dropdown Menu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="dropdown">
<button
id="dropdown-toggle"
class="dropdown-toggle"
onclick="toggleDropdown()"
>
Select An Option
</button>
<div id="dropdown-menu" class="dropdown-menu">
<a href="#" class="dropdown-item" onclick="selectOption('New York')"
>New York</a
>
<a href="#" class="dropdown-item" onclick="selectOption('London')"
>London</a
>
<a href="#" class="dropdown-item" onclick="selectOption('Tokyo')"
>Tokyo</a
>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Now, let’s style the page. Copy the CSS code below and paste it into your stylesheet.
body {
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
background-color: #6200ea;
color: #ffffff;
width: 200px;
min-width: 160px;
padding: 20px 10px;
border: none;
cursor: pointer;
font-size: 18px;
border-radius: 10px;
transition: background-color 0.3s;
}
.dropdown-toggle:hover {
background-color: #3700b3;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 200px;
min-width: 160px;
border-radius: 10px;
margin-top: 5px;
z-index: 1;
}
.dropdown-item {
color: #333333;
padding: 10px 16px;
text-decoration: none;
display: block;
transition: background-color 0.2s;
border-radius: 10px;
}
.dropdown-item:hover {
background-color: #eeeeee;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function toggleDropdown() {
//toggle the display of the dropdown menu
const dropdownMenu = document.getElementById("dropdown-menu");
dropdownMenu.style.display =
dropdownMenu.style.display === "block" ? "none" : "block";
}
function selectOption(optionText) {
//Update the dropdown button text
document.getElementById("dropdown-toggle").textContent = optionText;
//Close the dropdown menu after selecting an option
document.getElementById("dropdown-menu").style.display = "none";
}
//Close the dropdown if clicked outside
document.addEventListener("click", function (event) {
const dropdown = document.querySelector(".dropdown");
if (!dropdown.contains(event.target)) {
document.getElementById("dropdown-menu").style.display = "none";
}
});
Conclusion:
Now you have a fully functional dropdown menu! You can use it for navigation, settings, or other interactive elements in your projects. Customize the styling to match your brand or app design, and add more options as needed.
