Выпадающее меню на JS
Создаю фокусированное выпадающее меню. Что-то мне удалось создать, но вылез баг. При фокусе элемента .select__output невозможно выбрать элементы, данный класс тут же теряет свой фокус. Как исправить?
function dropdown() < const selectItem = document.querySelectorAll(".select__output"); selectItem.forEach((item, i) => < item.addEventListener("focusin", (event) =>< const selectBody = document.querySelectorAll(".select__body"); selectBody[i].classList.toggle("show"); item.classList.toggle("shadow"); >); item.addEventListener("focusout", (event) => < const selectBody = document.querySelectorAll(".select__body"); selectBody[i].classList.toggle("show"); item.classList.toggle("shadow"); >); >); > dropdown();.select < width: 60%; >.select:not(:last-child) < margin-right: 32px; >.selects__title < font-weight: normal; font-size: 18px; line-height: 25px; letter-spacing: 0.02em; color: #111111; opacity: 0.8; margin-bottom: 16px; margin-left: 16px; >.select__item < position: relative; >.select__output < display: flex; justify-content: space-between; width: 100%; height: 36px; padding: 15px 16px; background: #FFFFFF; border: 2px solid rgba(125, 138, 253, 0.3); border-radius: 4px; cursor: pointer; >.shadow < box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); >.select__content < font-weight: normal; font-size: 18px; line-height: 25px; letter-spacing: 0.02em; color: #777; opacity: 0.8; >.select__body < position: absolute; top: 64px; left: 0; width: 100%; max-height: 379px; padding: 24px 16px; background: #FFFFFF; border: 2px solid rgba(125, 138, 253, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.04); border-radius: 4px; overflow-y: scroll; z-index: 1; >.select-body__height < height: 443px; >.select-body__list < list-style: none; >.select-body__item:not(:last-child) < margin-bottom: 16px; >.select-body__item:last-child < margin-bottom: 20px; >.select__btn < display: flex; justify-content: center; align-items: center; width: 100%; >.select-btn__item < background: #638FFF; border-radius: 4px; padding: 9px 63px; border: none; margin: 0 auto; font-weight: bold; line-height: 22px; text-align: center; color: #FFFFFF; >.hide < display: none; >.show
Отрасль
Выбрать
Как сделать выпадающее меню на js
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
Светлая тема Тёмная тема
Поделиться
- Учебник
- Браузер: документ, события, интерфейсы
- Введение в события
- Введение в браузерные события
Создать раскрывающееся меню
важность: 5
Создать меню, которое по нажатию открывается либо закрывается:
P.S. HTML/CSS исходного документа можно и нужно менять.
HTML/CSS
Для начала создадим разметку HTML/CSS нашего меню.
Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.
Список пунктов меню может быть представлен в виде списка ul/li .
Для заголовка мы используем тег , потому что , как и любой блочный элемент, имеет скрытое свойство display:block , а значит, занимает ширину 100%.
Сладости (нажми меня)!
Таким образом, если мы зададим обработчик события onclick , то он будет срабатывать по клику на всей ширине поля.
…тег – строчный элемент, по умолчанию имеет свойство display: inline , который занимает ровно столько места, сколько занимает сам текст:
Сладости (нажми меня)!
Переключение меню
Переключение меню
Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.
Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open .
Без класса .open меню будет закрыто:
.menu ul < margin: 0; list-style: none; padding-left: 20px; display: none; >.menu .title::before
…А с ним (с классом .open ) стрелка будет меняться, и список будет показываться:
.menu.open .title::before < content: '▼ '; >.menu.open ul
Выпадающее меню выбора с использованием Javascript
Цель создания выпадающего меню — это оптимальное использование пространства на маленьких дисплеях. Иногда к такому приему организации меню, прибегают и для больших мониторов.
HTML разметка
Поместим в контейнер dropdown поле input и блок option с иконками и названиями пунктов меню. Подключим библиотеку ionicons, откуда копируем названия нужных иконок. Вставим иконки в разметку через тег ion-icon.
CSS стилизация поля input
Рисуем стрелочку с помощью псевдоэлемента before и свойства border. При наведении стрелочка будет поворачиваться вниз.
@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
body display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
min-height: 100vh;
background: #fafafa;
>
.dropdown position: relative;/*относительное позиционирование*/
margin-top: 100px;/*отступ сверху*/
width: 300px;
height: 50px;
>
.dropdown::before content: »;
position: absolute;
top: 15px;
right: 20px;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
z-index: 10;
transition: 0.5s;
>
.dropdown.active::before top: 22px;
transform: rotate(-225deg);/*поворот вниз*/
>
.dropdown input position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
background: #fff;
text-transform: capitalize;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
outline: none;
>
CSS стилизация блока option
Пришло время сделать ключевое действие — спрятать пункты меню, прописав свойство display: none.
.dropdown .option position: absolute;
top: 70px;
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
display: none;/*прячем пункты меню*/
text-transform: capitalize;
>
JavaScript функция
Навешиваем на все пункты меню событие onclick. При клике на пункт меню будет срабатывать функция show.
Функция находит все пункты меню.
При клике в области контейнера dropdown, переключает класс option на active. Активный класс снова делает видимым выпадающее меню и тогда можно делать свой выбор.
.dropdown.active .option display: block;
>
.dropdown .option div:hover background: #62baea;/*окрашивает синим цветом*/
color: #fff;/*меняет цвет текста*/
>
.dropdown .option ion-icon position: relative;
top: 4px;
font-size: 1.2em;
>
Создано 14.02.2022 10:47:28
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так:
- Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
Как сделать выпадающее меню при клике на кнопку? [дубликат]
Вероятно вы спрашиваете про аккордеон (accordion, aka collapsible).
Я уже отвечал на вопросы о том как его можно сделать здесь:
Пара адаптированных примеров:
const handleClick = event => < const divs = document.querySelectorAll("div") const target = event.target.nextElementSibling target.classList.toggle("hide") >document.querySelectorAll("button").forEach(item => < item.addEventListener("click", handleClick) >)
a < display: block; margin: 10px 0; >button < display: block; >.hide
Блок 1 Ссылка 1 Ссылка 2 Ссылка 3 Блок 2 Ссылка 1 Ссылка 2 Блок 3 Ссылка 1
ТОЛЬКО ОДНА АКТИВНАЯ СЕКЦИЯ
const handleClick = event => < const divs = document.querySelectorAll("div") const target = event.target.nextElementSibling target.classList.toggle("hide") divs.forEach(item => < if (item !== target) < item.classList.add("hide") >>) > document.querySelectorAll("button").forEach(item => < item.addEventListener("click", handleClick) >)
a < display: block; margin: 10px 0; >button < display: block; >.hide
Блок 1 Ссылка 1 Ссылка 2 Ссылка 3 Блок 2 Ссылка 1 Ссылка 2 Блок 3 Ссылка 1
Отслеживать
ответ дан 12 сен 2020 в 16:13
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
- javascript
- html
- css
- accordion
Важное на Мете
Связанные
Похожие
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.9.3159
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.