Вступление #

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

Установка #

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

    <button class="js-slideout-trigger" type="button" data-slideout-id="slideout-panel">Slideout show</button>

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

    BasicSlideout.init('.my-slideout-trigger');
    BasicSlideout.init(document.querySelector('.my-slideout-trigger'));
    BasicSlideout.init(document.querySelectorAll('.my-slideout-trigger'));

    // или

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

Методы #

show() #

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

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

hide() #

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

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

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

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

slideout visibility #

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

Параметры:

    document.getElementById('my-slideout-panel').addEventListener('slideout visibility', function(event) {

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

    }, false)