iRuemu Coding Blog
Creating a Custom Dropdown with Icon Toggle using HTML, CSS, and JavaScript

Photo by Clark Tibbs on Unsplash

Creating a Custom Dropdown with Icon Toggle using HTML, CSS, and JavaScript

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

Table of contents

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.

dropdownHTML5CSSJavaScript