Содержание
Безупречное кликабельное выпадающее меню
Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.
В современном веб-дизайне выпадающее меню играет ключевую роль в обеспечении удобной навигации по сайту. Правильно спроектированное не только улучшает пользовательский опыт, но и способствует увеличению кликабельности, что в свою очередь может привести к росту посещаемости сайта. В этой статье мы рассмотрим создание безупречного кликабельного выпадающего меню, используя HTML, CSS и JavaScript.
Основные элементы выпадающего меню
Для начала важно понять, что выпадающее меню состоит из нескольких ключевых компонентов:
- Меню (menu): основная область, где располагаются пункты.
- Пункт меню (menu item): отдельный элемент, который может содержать вложенные списки.
- Список (dropdown list): список, который появляется при взаимодействии с пунктом.
Создание структуры HTML
Первый шаг в создании выпадающего меню — это разработка его HTML-структуры. Рассмотрим пример простого дропдауна.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Дропдаун</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="menu"> <ul> <li><a href="#">Главная</a></li> <li class="dropdown"> <a href="#">Услуги</a> <ul class="dropdown-menu"> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> </ul> </li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> <script src="scripts.js"></script> </body> </html>
Стилизация меню с помощью CSS
После создания структуры HTML необходимо стилизовать меню для улучшения его внешнего вида и функциональности. Использование CSS поможет скрыть и показать выпадающий список при взаимодействии с пользователем.
/* Основные стили */
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li {
position: relative;
}
.menu a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #000;
}
/* Стили для выпадающего списка */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.dropdown-menu li {
width: 200px;
}
.dropdown-menu a {
padding: 10px;
color: #000;
}
/* Показ при наведении */
.dropdown:hover .dropdown-menu {
display: block;
}
Добавление интерактивности с помощью JavaScript
Файлы из примеров выше можно открыть и отредактировать в Dreamweaver: HTML-страницу, файл стилей и файл скрипта. Существующий документ открывают через File > Open, а JavaScript и CSS по умолчанию открываются в режиме кода (Adobe). Перед просмотром в браузере документ нужно сохранить, иначе браузер не покажет последние изменения; затем страницу открывают в браузере и проверяют ссылки и содержимое (Adobe).
Для кликабельности, необходимо добавить небольшую интерактивность с помощью JavaScript. Это позволит пользователю раскрывать и скрывать при нажатии.
document.addEventListener('DOMContentLoaded', function() {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
dropdown.addEventListener('click', function(event) {
if (event.target.closest('.dropdown-menu a')) return;
event.preventDefault();
this.classList.toggle('active');
const dropdownMenu = this.querySelector('.dropdown-menu');
dropdownMenu.classList.toggle('show');
});
});
});
Для работы данного скрипта нужно добавить соответствующие стили для класса `show`:
/* Стили для отображения выпадающего меню при клике */
.dropdown-menu.show {
display: block;
}
Способы улучшения кликабельности
Кликабельность можно улучшить несколькими способами:
- Оптимизация для мобильных устройств: сделайте его адаптивным с помощью медиа-запросов.
- Четкая структура и контент: используйте понятные названия пунктов и логичное расположение.
- Анимации: добавьте CSS-анимации для плавного раскрытия и закрытия.
- Интерактивные элементы: используйте JavaScript для добавления дополнительных эффектов при взаимодействии.
Пример анимации
/* Анимация для выпадающего меню */
.dropdown-menu {
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
}
Выпадающее меню по клику: сохранить ссылки и управление клавиатурой
В старом обработчике click на родительском li вызов event.preventDefault() стоит после проверки closest('.dropdown-menu a'), но до переключения класса. preventDefault отменяет действие по умолчанию, включая переход по ссылке (MDN). Показанная проверка if (event.target.closest('.dropdown-menu a')) return; уже подходит для этой разметки: она пропускает клики по ссылкам внутри подменю и не перехватывает верхнюю ссылку-триггер «Услуги», поэтому её переключение продолжает работать. Дочерний элемент ссылки тоже находит ближайшую подходящую ссылку, так что более глубокое вложение само по себе проверку не ломает. Если проверка не срабатывает, действие по умолчанию отменяется и переход по ссылке не происходит.
Ниже — редакционный пример раскрывающейся навигации. Старый код он не заменяет. Пример показывает, как связать кнопку, список и ссылки. Пример не помечен role="menu": обычная навигация ссылками не требует ARIA menu role с его сложным поведением (APG).
Редакционный пример
Шаблон составлен редакцией, данные условны. Браузерный прогон не проводился.
<nav aria-label="Основная навигация">
<ul>
<li><a href="/">Главная</a></li>
<li>
<button type="button" aria-expanded="false" aria-controls="services-menu">
Услуги
</button>
<ul id="services-menu" hidden>
<li><a href="/services/one">Услуга 1</a></li>
<li><a href="/services/two">Услуга 2</a></li>
<li><a href="/services/three">Услуга 3</a></li>
</ul>
</li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>
const button = document.querySelector('[aria-controls="services-menu"]');
const menu = document.getElementById('services-menu');
const nav = button.closest('nav');
button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!expanded));
menu.hidden = expanded;
});
function closeMenu() {
button.setAttribute('aria-expanded', 'false');
menu.hidden = true;
}
nav.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && !menu.hidden) {
closeMenu();
button.focus();
}
});
nav.addEventListener('focusout', (event) => {
if (!nav.contains(event.relatedTarget)) {
closeMenu();
}
});
Это единственный целиком копируемый вариант скрипта для примера выше. Разместите его после HTML-разметки либо дождитесь готовности DOM, чтобы button и menu уже существовали. Один обработчик click на кнопке синхронизирует aria-expanded с атрибутом hidden списка; обработчик keydown на nav закрывает открытый список по Escape и возвращает фокус кнопке, а focusout закрывает список при выходе фокуса за пределы навигации. Поведение согласуется со всеми пятью строками условной проверки ниже.
aria-expanded показывает скрытое или видимое состояние управляемого контейнера (APG). Escape закрывает раскрытый список и возвращает фокус на управляющую кнопку (APG).
Условная проверка
| Шаг | Действие | Ожидаемый результат |
|---|---|---|
| 1 | Tab до кнопки «Услуги» | Фокус на кнопке, список скрыт |
| 2 | Enter на кнопке | aria-expanded="true", список видим |
| 3 | Tab до ссылки «Услуга 1» и Enter | Переход по адресу /services/one |
| 4 | Escape при открытом списке | Список скрыт, фокус на кнопке |
| 5 | Tab из открытого списка за пределы навигации | Список закрыт, aria-expanded="false", фокус на следующем элементе вне навигации |
Эти шаги — условный сценарий проверки. Отчётом о выполненном тестировании они не являются. Пример APG иллюстративный и требует проверки перед производственным использованием (APG).
Связь со старым кодом
Старый обработчик на li продолжит перехватывать клики, если его не изменить. Добавьте в начало обработчика guard только для вложенных ссылок — if (event.target.closest('.dropdown-menu a')) return; — тогда верхняя ссылка «Услуги» сохранит переключение подменю, а ссылки внутри подменю продолжат переход по href. Пример с button — это отдельная разметка с собственным обработчиком, и склеивать его со старым обработчиком на li не следует. Новый пример не объявляет доступность доказанной одним атрибутом: aria-expanded лишь сообщает состояние, а полное поведение требует проверки фокуса, Escape и перехода по ссылкам.
Частые вопросы
Почему ссылки внутри выпадающего меню могут не работать? Если обработчик клика на родительском элементе вызывает preventDefault, действие по умолчанию для ссылки отменяется. Добавьте проверку, которая пропускает клики по ссылкам.
Как связать кнопку и список для вспомогательных технологий? Используйте атрибут aria-expanded на кнопке и aria-controls со значением id списка. Меняйте aria-expanded при открытии и закрытии.
Что должно происходить при нажатии Escape? Список закрывается, а фокус возвращается на кнопку, которая управляет этим списком.
Заключение
Создание безупречного кликабельного выпадающего меню требует внимания к деталям и использования современных технологий HTML, CSS и JavaScript. Следуя приведенным примерам и рекомендациям, вы сможете создать меню, которое улучшит навигацию на вашем сайте и повысит его кликабельность.