Вступление #

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

Выпадающее меню реализовано на базе Headless Tippy.

Установка #

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

    <button
		class="my-dropdown-trigger js-dropdown-trigger"
		type="button"
		data-dropdown-menu="my-dropdown-menu"
	>
		Вызвать выпадающее меню
	</button>

	<div
		id="my-dropdown-menu"
		class="dropdown-menu"
	>
        <nav>
            <a href="">Брутали́зм</a>
            <a href="">Деконструктиви́зм</a>
            <a href="">Архитектурный модернизм</a>
        </nav>
    </div>

	// настройки Headless Tippy(https://atomiks.github.io/tippyjs/v6/all-props/)
	const options = {
		'trigger': 'mouseenter focus',
		'placement': 'top',
	};

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

    // или

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

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

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

data-dropdown-options #

В значениях указываются параметры для гибкой настройки выпадающего меню, с ними можно ознакомиться на странице официальной документации Tippy.js.

	<button
		class="my-dropdown-trigger js-dropdown-trigger"
		type="button"
		data-dropdown-menu="my-dropdown-menu"
		data-dropdown-options='{"trigger": "mouseenter focus", "placement": "top"}'
	>
		Вызвать выпадающий список
	</button>

	<div
		id="my-dropdown-menu"
		class="dropdown-menu"
	>
		<nav>
			<a href="">Брутали́зм</a>
			<a href="">Деконструктиви́зм</a>
			<a href="">Архитектурный модернизм</a>
		</nav>
	</div>

Методы #

show() #

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

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

hide() #

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

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

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const myDropdownTrigger = document.querySelector(".my-dropdown-trigger")

	console.log(myDropdownTrigger.BasicDropdown) // пример экземпляра

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

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

dropdown:change #

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

Параметры:

	const myDropdownTrigger = document.querySelector('.my-dropdown-trigger');

	// Событие навешивается на триггер выпадающего меню.
	myDropdownTrigger.addEventListener('dropdown:change', function(event) {

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

    }, false);