freeCodeCamp

11 KiB

Raw Blame History

title	localeTitle
How to Create a Dropdown Menu with CSS and JavaScript	Как создать раскрывающееся меню с CSS и JavaScript

Как создать раскрывающееся меню с CSS и JavaScript

В этом уроке вы узнаете, как создать простое выпадающее меню с ванильным Javascript, HTML и CSS. Мы будем проходить через HTML, CSS и Javascript-код, но уделяем больше внимания программированию, поскольку это учебник JS. Мы будем использовать только простые JS и CSS, без каких-либо фреймворков или препроцессоров. Единственное (вид) исключения будет импортировать файл шрифта Awesome CSS, потому что мы будем использовать один из его значков.

Это предназначено для разработчиков, которые имеют среднее представление о HTML, CSS и JS. Я попытался сделать его максимально чистым, но я не буду уделять слишком много внимания деталям. Надеюсь, вам понравится.

Скриншоты

Вот как выглядит результат кода:

Начальный экран:

Откроется окно:

Выпадающее меню с выбранной опцией:

HTML:

В этом разделе мы обсудим реализацию HTML-кода для демонстрационной страницы. Чтобы начать, давайте посмотрим код <head>


<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Dropdown Example</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="styles.css"> 
 </head>

Это, в основном, HTML headplate, за исключением тегов link загружают две таблицы стилей CSS, которые мы будем использовать в этом уроке: стили шрифта Awesome и файл styles.css , где мы будем определять стили этой страницы.

Затем есть остальная часть HTML-файла, тело:


<body> 
    <div class='dropdown'> 
        <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> 
 
        <div class='menu pointerCursor hide'> 
            <div class='option' id='option1'>Option 1</div> 
            <div class='option' id='option2'>Option 2</div> 
            <div class='option' id='option3'>Option 3</div> 
            <div class='option' id='option4'>Option 4</div> 
        </div> 
 
    </div> 
    <span id='result'>The result is: </span> 
    <script> 
      ... 
    </script> 
 </body> 
 </html>

Этот раздел можно разделить на 3 основные части:

.dropdown div, где будет определена структура элемента выпадающего элемента.
Элемент #result , который будет содержать выбранный параметр пользователем, из раскрывающегося элемента.
Сценарий написан в <script> . Его реализация скрыта здесь, потому что ее детали будут объяснены в последнем разделе этого урока.

Выпадающий элемент - это div содержащий элементы title и menu . Первый определяет, какой текст будет представлен в элементе перед тем, как будет выбран какой-либо параметр, и последний определит параметры, которые будут выбираться элементом.

Элемент result просто показать вам, какая опция выбрана.

Стили:

Ниже вы можете проверить полный код css. Как вы можете видеть , что делает использование CSS3 transition и transform конструкции.

Обратите внимание на определения классов .dropdown . Они используются для определения макета для раскрывающегося компонента контейнера, а также его внутренних элементов, таких как .title и его .option .

body{ 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
 } 
 
 .hide { 
    max-height: 0 !important; 
 } 
 
 .dropdown{ 
    border: 0.1em solid black; 
    width: 10em; 
    margin-bottom: 1em; 
 } 
 
 .dropdown .title{ 
    margin: .3em .3em .3em .3em; 
    width: 100%; 
 } 
 
 .dropdown .title .fa-angle-right{ 
    float: right; 
    margin-right: .7em; 
    transition: transform .3s; 
 } 
 
 .dropdown .menu{ 
    transition: max-height .5s ease-out; 
    max-height: 20em; 
    overflow: hidden; 
 } 
 
 .dropdown .menu .option{ 
    margin: .3em .3em .3em .3em; 
    margin-top: 0.3em; 
 } 
 
 .dropdown .menu .option:hover{ 
    background: rgba(0,0,0,0.2); 
 } 
 
 .pointerCursor:hover{ 
    cursor: pointer; 
 } 
 
 .rotate-90{ 
    transform: rotate(90deg); 
 }

JavaScript:

Теперь посмотрим, как реализована часть Javascript. Сначала мы рассмотрим определения функций а затем код, который вызывает эти функции, чтобы сделать выпадающие действия.

В принципе, есть 3 действия, которые происходят в зависимости от того, что представляет собой пользовательское взаимодействие, поскольку их слушатели добавляются в элементы DOM:

Нажав на раскрывающийся элемент
Выбор одного из раскрывающихся меню
Изменение текущего выбранного параметра

Я хотел бы дать понять, что мы используем функции стрелок ( () => {} ) и ключевое слово const , которые являются функциями ES6. Вы, наверное, хорошо, если используете последнюю версию своего браузера, но помните об этом.

1. Нажав на раскрывающийся элемент

function toggleClass(elem,className){ 
    if (elem.className.indexOf(className) !== -1){ 
        elem.className = elem.className.replace(className,''); 
    } 
    else{ 
        elem.className = elem.className.replace(/\s+/g,' ') +   ' ' + className; 
    } 
 
    return elem; 
 } 
 
 function toggleDisplay(elem){ 
    const curDisplayStyle = elem.style.display; 
 
    if (curDisplayStyle === 'none' || curDisplayStyle === ''){ 
        elem.style.display = 'block'; 
    } 
    else{ 
        elem.style.display = 'none'; 
    } 
 } 
 
 
 function toggleMenuDisplay(e){ 
    const dropdown = e.currentTarget.parentNode; 
    const menu = dropdown.querySelector('.menu'); 
    const icon = dropdown.querySelector('.fa-angle-right'); 
 
    toggleClass(menu,'hide'); 
    toggleClass(icon,'rotate-90'); 
 }

Когда щелкнут элемент выпадающего меню, он открывается (если он закрыт) или закрывается (если он открыт). Это происходит путем привязки toggleMenuDisplay к прослушивателю событий щелчка в раскрывающемся элементе. Эта функция переключает отображение своего элемента menu с помощью функций toggleDisplay и toggleClass .

2. Выбор одного из раскрывающихся меню

function handleOptionSelected(e){ 
    toggleClass(e.target.parentNode, 'hide'); 
 
    const id = e.target.id; 
    const newValue = e.target.textContent + ' '; 
    const titleElem = document.querySelector('.dropdown .title'); 
    const icon = document.querySelector('.dropdown .title .fa'); 
 
 
    titleElem.textContent = newValue; 
    titleElem.appendChild(icon); 
 
    //trigger custom event 
    document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); 
    //setTimeout is used so transition is properly shown 
    setTimeout(() => toggleClass(icon,'rotate-90',0)); 
 }

3. Изменение выбранного параметра

function handleTitleChange(e){ 
    const result = document.getElementById('result'); 
 
    result.innerHTML = 'The result is: ' + e.target.textContent; 
 }

Функция handleTitleChange привязана к пользовательскому событию change в элементе .title , чтобы изменить #result элемента #result всякий раз, когда элемент заголовка изменяется. Вызов этого события выполняется в предыдущем разделе.

Основной код

//get elements 
 const dropdownTitle = document.querySelector('.dropdown .title'); 
 const dropdownOptions = document.querySelectorAll('.dropdown .option'); 
 
 //bind listeners to these elements 
 dropdownTitle.addEventListener('click', toggleMenuDisplay); 
 dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); 
 document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

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

демонстрация

Полный код и демонстрацию этого приложения можно найти здесь .

11 KiB Raw Blame History Unescape Escape