Untitled

<!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">
    <title>Multi-Language Button</title>
    <link href='https://fonts.googleapis.com/css?family=Manrope' rel='stylesheet'>
    <style>
        .dropdown{
            font-family: 'Manrope';
            font-weight: 500;
            font-size: 18px;
            position: relative;
            margin: 2em;
            width: fit-content;
        }

        .dropdown *{
            box-sizing: border-box;
        }

        .select {
            background: #ffffff;
            color: #31383f;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 6px;
            padding-bottom: 7px;
            padding-left: 12px;
            padding-right: 12px;
            border: 1px #c9d0db solid;
            border-radius: 10px;
            cursor: pointer;
            /* transition: background 0.3s; */
        }

        .select:hover{
            background: #f5f5f5;
        }

        .caret{
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid #1D70EC;
            transition: 0.3s;
            margin-left: 8px;
            margin-top: 2px;
        }

        .caret-rotate{
            transform: rotate(180deg);
        }

        .menu-dropdown{
            list-style: none;
            padding: 0.2em 0.5em;
            background: #ffffff;
            border: 1px #c9d0db solid;
            box-shadow: 0 0.5em 1em rgba(0,0,0,0.2);
            border-radius: 0.5em;
            color: #31383f;
            position: absolute;
            top: 3em;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
            opacity: 0;
            display: none;
        }

        .menu-dropdown li{
            padding: 0.7em 0.5em;
            margin: 0.3em 0;
            border-radius: 0.5em;
            cursor: pointer;
        }

        .menu-dropdown li:hover{
            background: #f5f5f5;
        }

        .active{
            background: #ffffff;
        }

        .menu-dropdown-open{
            display: block;
            opacity: 1;
            width: fit-content;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <div class="select">
            <span class="selected">English</span>
            <div class="caret"></div>
        </div>
        <ul class="menu-dropdown">
            <li class="active">English</li>
            <li>Bahasa Indonesia</li>
            <li>Française</li>
        </ul>
    </div>

    <script>
        // get all dropdowns
        const dropdownItems = document.querySelectorAll('.dropdown');
        // iterate all dropdown elements
        dropdownItems.forEach(el => {
            // get inner elements of each dropdown
            const select = el.querySelector('.select');
            const caret = el.querySelector('.caret');
            const menuDropdown = el.querySelector('.menu-dropdown');
            const selected = el.querySelector('.selected');
            const options = el.querySelectorAll('.menu-dropdown li');
            
            // click event for the select element
            select.addEventListener('click', () => {
                // add the styles to caret, and menu dropdown
                caret.classList.toggle('caret-rotate');
                menuDropdown.classList.toggle('menu-dropdown-open');
            });

            // iterate through all option elements
            options.forEach(option => {
                // click event for each option
                option.addEventListener('click', () => {
                    // change selected inner text to clicked option inner text
                    selected.innerText = option.innerText;
                    // remove styles to the select element, caret, 
                    // menu dropdown, and active class from all option elements
                    select.classList.remove('select-clicked');
                    caret.classList.remove('caret-rotate');
                    menuDropdown.classList.remove('menu-dropdown-open');
                    options.forEach(option => {
                        option.classList.remove('active');
                    });
                    // add active class to clicked option element
                    option.classList.add('active');
                });
            });
        });


    </script>
</body>
</html>
Editor is loading...