Creating a Custom Dropdown with Icon Toggle using HTML, CSS, and JavaScript
I'm Ogunuyo Ogheneruemu Brown, a senior software developer. I specialize in DApp apps, fintech solutions, nursing web apps, fitness platforms, and e-commerce systems. Throughout my career, I've delivered successful projects, showcasing strong technical skills and problem-solving abilities. I create secure and user-friendly fintech innovations. Outside work, I enjoy coding, swimming, and playing football. I'm an avid reader and fitness enthusiast. Music inspires me. I'm committed to continuous growth and creating impactful software solutions. Let's connect and collaborate to make a lasting impact in software development.
In this tutorial, we'll walk through the process of creating a custom dropdown menu with an icon toggle using HTML, CSS, and JavaScript. The result will be a user-friendly dropdown that opens and closes when clicked, with the icon changing to indicate its status.
Prerequisites
Make sure you have a basic understanding of HTML, CSS, and JavaScript before proceeding with this tutorial.
Step 1: Setting Up the HTML Structure
<!DOCTYPE html>
<html>
<head>
<!-- Include necessary CSS and Font Awesome library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div id="custom-dropdown" onclick="toggleDropdown()">
<span id="selected-option-text">Select a car</span>
<i id="dropdown-icon" class="fas fa-angle-down"></i>
<div id="dropdown-options">
<!-- Dropdown options go here -->
</div>
</div>
<script>
// JavaScript code goes here
</script>
</body>
</html>
Step 2: Styling the Dropdown
#custom-dropdown {
width: 150px;
border: 1px solid #ccc;
padding: 5px;
position: relative;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
#dropdown-options {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
width: 150px;
top: 30px;
z-index: 1;
}
.dropdown-option {
padding: 10px;
cursor: pointer;
}
/* Add more styles as needed */
Step 3: Adding html code
<div id="custom-dropdown" onclick="toggleDropdown()">
<span id="selected-option-text">Select a car</span>
<i id="dropdown-icon" class="fas fa-angle-down"></i>
<div id="dropdown-options">
<div class="dropdown-option" onclick="selectOption('volvo')">Volvo</div>
<div class="dropdown-option" onclick="selectOption('saab')">Saab</div>
<div class="dropdown-option" onclick="selectOption('opel')">Opel</div>
<div class="dropdown-option" onclick="selectOption('audi')">Audi</div>
</div>
</div>
Step 4: Adding JavaScript Functionality
function selectOption(value) {
document.getElementById("selected-option-text").innerText = value;
document.getElementById("dropdown-options").style.display = "none";
document.getElementById("dropdown-icon").classList.remove("fa-angle-up");
document.getElementById("dropdown-icon").classList.add("fa-angle-down");
}
function toggleDropdown() {
var dropdownOptions = document.getElementById("dropdown-options");
var dropdownIcon = document.getElementById("dropdown-icon");
if (dropdownOptions.style.display === "block") {
dropdownOptions.style.display = "none";
dropdownIcon.classList.remove("fa-angle-up");
dropdownIcon.classList.add("fa-angle-down");
} else {
dropdownOptions.style.display = "block";
dropdownIcon.classList.remove("fa-angle-down");
dropdownIcon.classList.add("fa-angle-up");
}
}
document.addEventListener("click", function(event) {
var customDropdown = document.getElementById("custom-dropdown");
var dropdownOptions = document.getElementById("dropdown-options");
var dropdownIcon = document.getElementById("dropdown-icon");
if (!customDropdown.contains(event.target) && !dropdownOptions.contains(event.target)) {
dropdownOptions.style.display = "none";
dropdownIcon.classList.remove("fa-angle-up");
dropdownIcon.classList.add("fa-angle-down");
}
});
Complete Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
#custom-dropdown {
width: 150px;
border: 1px solid #ccc;
padding: 5px;
position: relative;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
#dropdown-options {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
width: 150px;
top: 30px;
z-index: 1;
}
.dropdown-option {
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="custom-dropdown" onclick="toggleDropdown()">
<span id="selected-option-text">Select a car</span>
<i id="dropdown-icon" class="fas fa-angle-down"></i>
<div id="dropdown-options">
<div class="dropdown-option" onclick="selectOption('volvo')">Volvo</div>
<div class="dropdown-option" onclick="selectOption('saab')">Saab</div>
<div class="dropdown-option" onclick="selectOption('opel')">Opel</div>
<div class="dropdown-option" onclick="selectOption('audi')">Audi</div>
</div>
</div>
<script>
function selectOption(value) {
document.getElementById("selected-option-text").innerText = value;
document.getElementById("dropdown-options").style.display = "none";
document.getElementById("dropdown-icon").classList.remove("fa-angle-up");
document.getElementById("dropdown-icon").classList.add("fa-angle-down");
}
function toggleDropdown() {
var dropdownOptions = document.getElementById("dropdown-options");
var dropdownIcon = document.getElementById("dropdown-icon");
if (dropdownOptions.style.display === "block") {
dropdownOptions.style.display = "none";
dropdownIcon.classList.remove("fa-angle-up");
dropdownIcon.classList.add("fa-angle-down");
} else {
dropdownOptions.style.display = "block";
dropdownIcon.classList.remove("fa-angle-down");
dropdownIcon.classList.add("fa-angle-up");
}
}
document.addEventListener("click", function(event) {
var customDropdown = document.getElementById("custom-dropdown");
var dropdownOptions = document.getElementById("dropdown-options");
var dropdownIcon = document.getElementById("dropdown-icon");
if (!customDropdown.contains(event.target) && !dropdownOptions.contains(event.target)) {
dropdownOptions.style.display = "none";
dropdownIcon.classList.remove("fa-angle-up");
dropdownIcon.classList.add("fa-angle-down");
}
});
</script>
</body>
</html>
Conclusion
In this tutorial, we learned how to create a custom dropdown menu with an icon toggle using HTML, CSS, and JavaScript. This interactive dropdown provides a user-friendly way to select options while maintaining a clean and modern design.
Feel free to customize the styles and functionality to match your project's requirements.
