Вступление #

Для работы выпадающегося меню, триггеру необходимо добавить класс .js-dropdown-trigger и специальный дата-атрибут data-dropdown-menu, где в значениях указывается id выпадающегося меню.

Установка #

Пример разметки и инициализации выпадающегося меню.

    <button class="js-dropdown-trigger" type="button" data-dropdown-menu="my-dropdown">Вызвать выпадающее меню</button>
    <div class="dropdown-menu" id="my-dropdown">
        <nav>
            <a href="">Брутали́зм</a>
            <a href="">Деконструктиви́зм</a>
            <a href="">Архитектурный модернизм</a>
        </nav>
    </div>

    BasicDropdown.init('.my-dropdown-trigger');
    BasicDropdown.init(document.querySelector('.my-dropdown-trigger'));
    BasicDropdown.init(document.querySelectorAll('.my-dropdown-trigger'));

    // или

    BasicDropdown.init(); // по умолчанию инициaлизирует элементы с классом .js-dropdown-trigger

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-dropdown-options #

В значениях указываются параметры для гибкой настройки выпадающегося меню.

    <div class="js-dropdown" data-dropdown-options='{"event": "mouseover", "position": "top"}'>
        <button class="dropdown-trigger" type="button">Вызвать выпадающий список</button>
        <div class="dropdown-menu">
            <nav>
                <a href="">Брутали́зм</a>
                <a href="">Деконструктиви́зм</a>
                <a href="">Архитектурный модернизм</a>
            </nav>
        </div>
    </div>

Методы #

show() #

Показывает выпадающее меню.

    // принимает значение типа Object или String
    // в значениях указывается выпадающее меню
    BasicDropdown.hide('.my-dropdown');

hide() #

Скрывает выпадающее меню.

    // принимает значение типа Object или String
    // в значениях указывается выпадающее меню
    BasicDropdown.show('.my-dropdown');

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

dropdown visibility #

Срабатывает при переключение видимости выпадающегося меню.

Параметры:

     document.querySelector('.my-dropdown').addEventListener('dropdown visibility', function(event) {

        console.log(event.detail); // параметры

    }, false);