Выпадающее меню на 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
Как сделать плавно выпадающее меню на чистом js?
Каким образом сделать плавно выпадающий элемент меню с подпунктами на чистом JS или там CSS?
Что бы при нажатии по элементы меню выпадало плавно вниз.
Вот что у меня
https://codepen.io/Shaltyr/pen/QWOeBXL
Так же нашёл что должно быть
https://codepen.io/fainder/pen/qBwBeO?editors=0110
Но тут на JQuery. А мне бы на чистом JS.
Идеи были конечно, но пока безуспешно(((
- Вопрос задан более двух лет назад
- 716 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Для правильного вопроса надо знать половину ответа
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
В чем заключается суть бинарного поиска неотсортированного массива?
- 1 подписчик
- 9 часов назад
- 101 просмотр
Как сделать — Кликабельный выпадающий список
Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.
Выпадающий
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Нажмите меня
Создание кликабельного выпадающего списка
Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.
Шаг 1) Добавить HTML:
Пример
Ссылка 1
Ссылка 2
Ссылка 3
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus background-color: #2980B9;
>
/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show
Объяснение примера
Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).
Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на»карточку». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Шаг 3) Добавить JavaScript:
Пример
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>