Вступление #

Чтобы создать выпадающее меню, к триггеру необходимо добавить класс .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,
)