Пользовательское выпадающее меню выбора

В этом проекте ты научишься создавать пользовательское выпадающее меню выбора, используя HTML CSS и JavaScript. Да, HTML также предоставляет нам меню выбора с функцией выпадающего списка, но мы научим вас делать его более красивым и увлекательным.

Меню выбора представляет собой комбинацию различных опций, в которых пользователь должен выбрать то, что ему нравится или в чем он нуждается. Этот тип меню выбора может быть создан для бесконечных целей, например, для выбора пола, любимой еды, носителя одежды и т.д.

Скачать

Как показано на виде, в верхней части есть раздел с текстом "Выберите медиа", а в нижней части есть несколько списков значков социальных сетей с названиями. На самом деле, сначала раздел списка социальных сетей будет скрыт, и когда мы нажмем на верхнюю кнопку выбора медиа, появится список социальных сетей. Когда мы нажимаем на список социальных сетей, его название появляется вверху внизу.

Скорее, чем теоретически, вы можете посмотреть реальную демонстрацию этого пользовательского выпадающего меню выбора, и, просмотрев полный видеоурок, вы получите представление о том, как весь HTML, CSS и JavaScript-код работают в этом проекте.

Я предоставил весь HTML CSS и JavaScript код, который я использовал для создания этого проекта [Пользовательское выпадающее меню выбора в HTML CSS и JavaScript]. Прежде чем перейти к файлам исходного кода, я хотел бы объяснить данный видеоурок.

Как вы видели в видеоуроке вашего проекта [Пользовательское выпадающее меню выбора]. Сначала мы видели только кнопку с текстом “Выбрать медиа”, когда я нажал на эту кнопку, появился список социальных сетей с различными значками и названиями социальных сетей. Когда я нажимал на каждый список социальных сетей, его название перемещалось на кнопку, а раздел списка социальных сетей исчезал. Для создания кнопки выбора и списка социальных сетей я использовал HTML и CSS, а для переключения списка меню социальных сетей и перемещения текста выбранного медиа на кнопку выбора я использовал некоторый код JavaScript.

Теперь, я полагаю, вы можете создать этот проект [Пользовательское выпадающее меню выбора], используя HTML CSS и JavaScript.

HTML КОД:


<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    
    <!--===== Boxicons CSS =====-->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
     
    <title>Custom Dropdown Select Menu</title>
</head>
<body>
    <div class="select-menu">
        <div class="select-btn">
            <span class="sBtn-text">Select your option</span>
            <i class="bx bx-chevron-down"></i>
        </div>
        <ul class="options">
            <li class="option">
                <i class="bx bxl-github" style="color: #171515;"></i>
                <span class="option-text">Github</span>
            </li>
            <li class="option">
                <i class="bx bxl-instagram-alt" style="color: #E1306C;"></i>
                <span class="option-text">Instagram</span>
            </li>
            <li class="option">
                <i class="bx bxl-linkedin-square" style="color: #0E76A8;"></i>
                <span class="option-text">Linkedin</span>
            </li>
            <li class="option">
                <i class="bx bxl-facebook-circle" style="color: #4267B2;"></i>
                <span class="option-text">Facebook</span>
            </li>
            <li class="option">
                <i class="bx bxl-twitter" style="color: #1DA1F2;"></i>
                <span class="option-text">Twitter</span>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
         
</body>
</html>

CSS КОД:


/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background: #E3F2FD;
}
.select-menu{
    width: 380px;
    margin: 140px auto;
}
.select-menu .select-btn{
    display: flex;
    height: 55px;
    background: #fff;
    padding: 20px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.select-btn i{
    font-size: 25px;
    transition: 0.3s;
}
.select-menu.active .select-btn i{
    transform: rotate(-180deg);
}
.select-menu .options{
    position: relative;
    padding: 20px;
    margin-top: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    display: none;
}
.select-menu.active .options{
    display: block;
}
.options .option{
    display: flex;
    height: 55px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
}
.options .option:hover{
    background: #F2F2F2;
}
.option i{
    font-size: 25px;
    margin-right: 12px;
}
.option .option-text{
    font-size: 18px;
    color: #333;
}

JAVASCRIPT КОД:


const optionMenu = document.querySelector(".select-menu"),
       selectBtn = optionMenu.querySelector(".select-btn"),
       options = optionMenu.querySelectorAll(".option"),
       sBtn_text = optionMenu.querySelector(".sBtn-text");
selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));       
options.forEach(option =>{
    option.addEventListener("click", ()=>{
        let selectedOption = option.querySelector(".option-text").innerText;
        sBtn_text.innerText = selectedOption;
        optionMenu.classList.remove("active");
    });
});