Простая и легкая JavaScript-библиотека для выпадающих меню
Пример работы: GH-Pages
- Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
- Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует важный функционал для выпающих меню: фокусируемость, навигация по элементам меню табом и стрелочками с клавиатуры, возможность создать несколько меню и т.д.
- Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение и даже анимацию появления с помощью CSS.
- Вложенные меню не поддерживаются. Вы не сможете открыть меню в виде вложенного меню.
- Скачайте последнюю версию библиотеки
- Подключите dropdown.min.css и dropdown.min.js из папки dist к странице
- Вызовите функцию
dropdown()
в вашем js файле
dropdown({ closeAfterSelect: true });
- Поместите в ваш html-документ следующую разметку:
<div class="dropdown">
<button class="dropdown-toggle" data-dd-target="first" aria-label="Открыть выпадающее меню">
Dropdown button 1
</button>
<ul class="dropdown-menu" data-dd-path="first">
<li>
<a class="dropdown-menu__link" href="#1">Link 1</a>
</li>
<li>
<a class="dropdown-menu__link" href="#2">Link 2</a>
</li>
<li>
<a class="dropdown-menu__link" href="#3">Link 3</a>
</li>
<!-- бесконечное количество ссылок -->
</ul>
</div>
.dropdown
- Родитель для конкретного меню, позволяет позиционировать меню абсолютно относительно себя.
.dropdown-menu
- Элемент самого меню. Имеет атрибут [data-dd-path]
, предназначенный для связи с открывающей кнопкой.
.dropdown-toggle
- Кнопка открывающая меню. Имеет атрибут [ data-dd-target]
, предназначенный для связи с открываемым меню.
.dropdown-menu__item
- Ссылка в меню. Можно заменить на любой элемент с сохранением класса и добавлением tabindex="0"
, если элемент по умолчанию не может получить фокус.
dropdown-menu__item--active
- Класс активности ссылки. Необходим для корректной навигации по элементам меню с помощью стрелочек.
- Добавьте к кнопке, которая будет открывать меню атрибут
[data-dd-path]
со значением, равным значению[data-dd-target]
у самого меню.
- closeAfterSelect - закрывать меню после выбора элемента
True/False
- по умолчаниюTrue
. Не влияет на выбор стрелками на клавиатуре!
Настраивать выпадающее меню можно исключительно через CSS:
- Для настройки меню используйте классы
.dropdown-menu
и.dropdown-menu--active
. - Для изменения стилей элементов меню используйте
.dropdown-menu__link
.
Приятного пользования!
P.S это моя первая библиотека в целом первый опыт разработки на JS вне определенного проекта. Не судите строго =)
По состоянию на декабрь 2022 года библиотека не отражает моих нынешних навыков разработки, и является, по большей части, историей и показателем моего прогресса