Вступление #

Для работы боковой панели можно использовать класс по умолчанию .js-slideout-trigger и атрибут data-slideout-id с указанием id панели.

Установка #

Пример разметки и инициализации бокового меню.

<button class="js-slideout-trigger" type="button" data-slideout-id="slideout-panel">
	Показать боковую панель
</button>

<div id="slideout-panel">
	<p>Пример боковой панели</p>
</div>

BasicSlideout.init({
	trigger: '.my-slideout-trigger',
	panel: '.my-slideout-panel',
})

// или

BasicSlideout.init() // по умолчанию инициaлизирует триггер с классом .js-slideout-trigger и с дата-атрибутом data-slideout-id.

Методы #

show() #

Показывает боковое меню.

// принимает значение типа Object или String
BasicSlideout.show('.my-slideout-panel')

hide() #

Скрывает боковое меню.

// принимает значение типа Object или String
BasicSlideout.hide('.my-slideout-panel')

Экземпляр #

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

const mySlideoutPanel = document.getElementById('my-slideout-panel')

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

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

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

slideout:change #

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

Параметры:

const mySlideoutPanel = document.getElementById('my-slideout-panel')

mySlideoutPanel.addEventListener(
	'slideout:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)