Активация выпадающего меню Bootstrap на Hover, а не Click
Быстрый ответ
Если желаете добавить в Bootstrap dropdown-меню возможность открытия при наведении курсора, примените следующий фрагмент JavaScript. Он задействует класс .dropdown
, прибавляя и исключая класс show
при событиях hover:
document.querySelectorAll('.dropdown').forEach(dropdown => {
dropdown.addEventListener('mouseenter', () => {
dropdown.classList.add('show');
dropdown.querySelector('.dropdown-menu').classList.add('show');
});
dropdown.addEventListener('mouseleave', () => {
dropdown.classList.remove('show');
dropdown.querySelector('.dropdown-menu').classList.remove('show');
});
});
Данный подход основан на используемом vanilla JavaScript имеющим синтаксис ES6. Применение этого метода не предполагает подключения jQuery, что делает ваш код более компактным и лаконичным, а dropdown-меню – более интерактивным без дополнительных кликов.
CSS: владение наведением
Если вы отдаёте предпочтение CSS, следующий код даст вам полное управление над отображением dropdown-меню, элегантно обрабатывая состояния наведения:
.dropdown:hover .dropdown-menu {
display: block;
}
Этот CSS-фрагмент делает dropdown-меню видимым при наведении курсора. Чтобы избежать неожиданных закрытий меню, старайтесь минимизировать промежутки между dropdown-ссылкой и самим меню, установив свойство display в значение "block".
Функциональность на различных устройствах
Обратите внимание на корректную работу решения на разнотипных устройствах и в разных браузерах. Важно не забывать о необходимости корректировки для сенсорных экранов, которые по умолчанию не поддерживают hover-событие. Таким образом, классический способ нажатия должен остаться рабочим.
Сознательная доступность
Не упускайте из внимания пользователей с ограниченными возможностями! Взаимодействие, основанное на наведении, может вызвать проблемы для тех, кто использует вспомогательные технологии или навигацию с клавиатуры. Защитите всему вашему решению доступность для каждого.
Визуализация
Представьте себе Dropdown в Bootstrap как сокровищную шкатулку, которую нужно раскрыть:
Наведение мышью на шкатулку: 🛳 ➡️ 🖱 ➡️ 👑
Когда пользователь-капитан наводит курсор на шкатулку, она открывается, давая доступ к ценным элементам dropdown:
Без наведения: 👑🔒 При наведении: 👑💰[Элемент 1, Элемент 2, Элемент 3]
Эффект hover позволяет раскрывать dropdown-элементы без необходимости делать дополнительных кликов, предоставляя быстрый и удобный доступ.
Улучшение UX с помощью jQuery
Привлекая jQuery, можно ещё более углубить пользовательский опыт, добавив класс show
к dropdown-меню при наведении:
$(document).ready(function(){
$('.dropdown').hover(
function() {
$(this).addClass('show').attr('aria-expanded', "true");
$(this).find('.dropdown-menu').addClass('show');
}, function() {
$(this).removeClass('show').attr('aria-expanded', "false");
$(this).find('.dropdown-menu').removeClass('show');
}
);
});
События mouseenter
и mouseleave
выполняют основную функцию. Aria-expanded
используется для доступности. Примените stop()
, чтобы исключить накопление анимаций и учтите использование delay()
, fadeIn()
и fadeOut()
для совершения более заметных эффектов dropdown.
Плавные переходы и задержки
Добавление небольшого отложенного действия предотвратит мгновенное скрытие dropdown-меню:
$('.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
}
);
Этот код применяет задержку в 100 миллисекунд до появления или исчезновения меню, обеспечивая более плавный эффект. Всегда тестируйте свой код на различных устройствах для сохранения единообразного поведения.
Проследить и обуздать кликовое событие Bootstrap
Расширяя функциональность Bootstrap dropdown с помощью hover-событий, не откажитесь от кликовых событий. Используйте mouseenter
в jQuery, чтобы обеспечить кооперацию возможностей Bootstrap и применяемого улучшения.
Ценность оригинального дизайна
Соблюдение принципов Bootstrap и расширение их функционала поможет поддерживать ваш код в актуальном состоянии.
Полезные материалы
- Dropdowns · Bootstrap v5.0 — официальная документация Bootstrap по dropdown-компонентам.
- :hover | CSS-Tricks — подробное руководство по использованию псевдокласса :hover в CSS.
- Element: mouseenter event – Web APIs | MDN — информация о событии mouseenter в JavaScript.
- Element: mouseleave event – Web APIs | MDN — описание события mouseleave.
- jQuery API Documentation — документация по методу .hover() в jQuery.
- CSS :hover Selector — применение селектора :hover в CSS с примерами.
- Date picker deosnt pop up – JavaScript – SitePoint Forums — обсуждение настройки dropdown-меню в Bootstrap, которое также применимо для hover-состояний.