У цьому підручнику ви дізнаєтеся, як створити просте випадаюче меню з ванільним Javascript, HTML та CSS. Ми пройдемося по коду HTML, CSS та Javascript, але приділяємо більше уваги програмуванню, оскільки це підручник з JS. Ми будемо використовувати просто JS та CSS, без фреймворків та препроцесорів. Єдиним (своєрідним) винятком буде імпорт файлу CSS Font Awesome, оскільки ми використовуватимемо одну з його піктограм.
Це призначено для розробників, які в середньому розуміються на HTML, CSS та JS. Я намагався зробити це максимально чистим, але не буду тут надто зосереджуватися на деталях. Сподіваюся, вам всім сподобається.
Знімки екрана
Ось як виглядає результат коду:
Початковий екран:
Випадаюче меню відкрито:
Випадаюче меню з вибраною опцією:
HTML:
У цьому розділі ми обговоримо реалізацію HTML-коду для демонстраційної сторінки. Для початку давайте подивимось код
Dropdown Example В основному це головний шаблонний шаблон HTML, за винятком linkтегів, що завантажують дві таблиці стилів CSS, які ми будемо використовувати в цьому посібнику: Стилі Font Awesome та styles.cssфайл, де ми визначимо стилі цієї сторінки.
Потім є решта HTML-файлу, тіло:
Select an option Option 1 Option 2 Option 3 Option 4 The result is: ... Цей розділ можна розділити на 3 основні частини:
.dropdownДІВ, де буде визначена структура DropDown елемента.#resultЕлемент, який буде містити обрану опцію користувача, з випадаючого елемента.- Сценарій, записаний у
тег. Його реалізація тут прихована, оскільки її подробиці будуть пояснені в останньому розділі цього посібника.
Випадаючий елемент - це елемент, що divмістить a 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вміст елемента щоразу, коли змінюється елемент заголовка. Запуск цієї події здійснюється в попередньому розділі.
Основний код
//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);У головному розділі є лише якийсь простий код, щоб отримати заголовок випадаючого списку та елементи параметрів, щоб прив’язати до них події, про які йшлося в останньому розділі.
Демо
Повний код та демо-версію цієї програми можна знайти тут.
More Information
- ES6 introduction
- Arrow functions
- Let and Const