iRuemu Coding Blog

Designing Interactive Dual Custom Dropdowns with HTML, CSS, and JavaScript

Photo by RetroSupply on Unsplash

Designing Interactive Dual Custom Dropdowns with HTML, CSS, and JavaScript

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

Table of contents

Dropdown menus are an essential UI element in web design. In this tutorial, we'll learn how to create custom-styled dropdowns using HTML, CSS, and JavaScript. We'll create two custom dropdowns: one for selecting cars and another for selecting languages. Here's a step-by-step guide to achieving this:

Step 1: Set Up the HTML Structure

<!DOCTYPE html>
<html>
<head>
    <!-- Include FontAwesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Add your CSS styling here -->
</head>
<body>
    <!-- Create custom dropdown for selecting cars -->
    <div class="custom-dropdown" onclick="toggleDropdown(this)">
        <span class="selected-option-text">Select a car</span>
        <i class="dropdown-icon fas fa-angle-down"></i>
        <div class="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>

    <!-- Create custom dropdown for selecting languages -->
    <div class="custom-dropdown" onclick="toggleDropdown(this)">
        <span class="selected-option-text">Select Language</span>
        <i class="dropdown-icon fas fa-angle-down"></i>
        <div class="dropdown-options">
            <div class="dropdown-option" onclick="selectOption('English')">English</div>
            <div class="dropdown-option" onclick="selectOption('French')">French</div>
            <div class="dropdown-option" onclick="selectOption('Chinese')">Chinese</div>
            <div class="dropdown-option" onclick="selectOption('Arabic')">Arabic</div>
        </div>
    </div>

    <!-- Add your JavaScript here -->
</body>
</html>

Step 2: Apply CSS Styling

/* Add your CSS styling here */
  .custom-dropdown {
        width: 150px;
        border: 1px solid #ccc;
        padding: 5px;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .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;
    }

Step 3: Add JavaScript Functionality

function selectOption(value) {
        var selectedOptionText = event.target.parentNode.parentNode.querySelector('.selected-option-text');
        selectedOptionText.innerText = value;

        var dropdownOptions = event.target.parentNode.parentNode.querySelector('.dropdown-options');
        dropdownOptions.style.display = "none";

        var dropdownIcon = event.target.parentNode.parentNode.querySelector('.dropdown-icon');
        dropdownIcon.classList.remove("fa-angle-up");
        dropdownIcon.classList.add("fa-angle-down");
    }

    function toggleDropdown(dropdownContainer) {
        var dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
        var dropdownIcon = dropdownContainer.querySelector('.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 customDropdowns = document.querySelectorAll('.custom-dropdown');

        customDropdowns.forEach(function(dropdownContainer) {
            var dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
            var dropdownIcon = dropdownContainer.querySelector('.dropdown-icon');

            if (!dropdownContainer.contains(event.target) && !dropdownOptions.contains(event.target)) {
                dropdownOptions.style.display = "none";
                dropdownIcon.classList.remove("fa-angle-up");
                dropdownIcon.classList.add("fa-angle-down");
            }
        });
    });

Step 4: 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;
        margin-bottom: 10px;
    }

    .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 class="custom-dropdown" onclick="toggleDropdown(this)">
    <span class="selected-option-text">Select a car</span>
    <i class="dropdown-icon fas fa-angle-down"></i>
    <div class="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>

<div class="custom-dropdown" onclick="toggleDropdown(this)">
    <span class="selected-option-text">Select Language</span>
    <i class="dropdown-icon fas fa-angle-down"></i>
    <div class="dropdown-options">
        <div class="dropdown-option" onclick="selectOption('English')">English</div>
        <div class="dropdown-option" onclick="selectOption('French')">French</div>
        <div class="dropdown-option" onclick="selectOption('Chinese')">Chinese</div>
        <div class="dropdown-option" onclick="selectOption('Arabic')">Arabic</div>
    </div>
</div>

<script>
  function selectOption(value) {
        var selectedOptionText = event.target.parentNode.parentNode.querySelector('.selected-option-text');
        selectedOptionText.innerText = value;

        var dropdownOptions = event.target.parentNode.parentNode.querySelector('.dropdown-options');
        dropdownOptions.style.display = "none";

        var dropdownIcon = event.target.parentNode.parentNode.querySelector('.dropdown-icon');
        dropdownIcon.classList.remove("fa-angle-up");
        dropdownIcon.classList.add("fa-angle-down");
    }

    function toggleDropdown(dropdownContainer) {
        var dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
        var dropdownIcon = dropdownContainer.querySelector('.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 customDropdowns = document.querySelectorAll('.custom-dropdown');

        customDropdowns.forEach(function(dropdownContainer) {
            var dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
            var dropdownIcon = dropdownContainer.querySelector('.dropdown-icon');

            if (!dropdownContainer.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>

In this blog post, we've learned how to create custom dropdowns using HTML, CSS, and JavaScript. The process involves setting up the HTML structure, applying CSS styling, and adding JavaScript functionality to toggle dropdown visibility and update selected options. Custom dropdowns offer enhanced user experience and design flexibility. Feel free to experiment further and customize the styling according to your project's needs.

dropdownHTML5CSSJavaScript