Dropdown

Простая и легкая JavaScript-библиотека для выпадающих меню

Пример работы: GH-Pages

Особенности

• Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
• Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует важный функционал для выпающих меню: фокусируемость, навигация по элементам меню табом и стрелочками с клавиатуры, возможность создать несколько меню и т.д.
• Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение и даже анимацию появления с помощью CSS.

Недостатки

• Вложенные меню не поддерживаются. Вы не сможете открыть меню в виде вложенного меню.

Как работать с библиотекой

1. Скачайте последнюю версию библиотеки
2. Подключите dropdown.min.css и dropdown.min.js из папки dist к странице
3. Вызовите функцию dropdown() в вашем js файле

dropdown({ closeAfterSelect: true });

4. Поместите в ваш 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 - Класс активности ссылки. Необходим для корректной навигации по элементам меню с помощью стрелочек.

5. Добавьте к кнопке, которая будет открывать меню атрибут [data-dd-path] со значением, равным значению [data-dd-target] у самого меню.

Props (параметры)

• closeAfterSelect - закрывать меню после выбора элемента True/False - по умолчанию True. Не влияет на выбор стрелками на клавиатуре!

Настройки

Настраивать выпадающее меню можно исключительно через CSS:

• Для настройки меню используйте классы .dropdown-menu и .dropdown-menu--active.
• Для изменения стилей элементов меню используйте .dropdown-menu__link.

Приятного пользования!

---

P.S это моя первая библиотека в целом первый опыт разработки на JS вне определенного проекта. Не судите строго =)

По состоянию на декабрь 2022 года библиотека не отражает моих нынешних навыков разработки, и является, по большей части, историей и показателем моего прогресса