Multi-level mobile menu

Простое многоуровневое мобильное меню.

Установка

npm install cool-menu

или подключение в html

<srcipt src="path-to/cool-menu.js"></script>

Использование

import CoolMenu from 'cool-menu'; // Если используется бандлер

const coolMenu = new CoolMenu({
    source: [
        {
            container    : document.querySelector('.catalog-navigation__dropdown > ul'),
            selectorTitle: '.catalog-menu__link',
            selectorList : '.catalog-menu',
            group        : {
                title          : 'Каталог',
                link           : '#',
                customItemClass: 'cool-menu-group-item',
                customLinkClass: 'cool-menu-group-link',
            },
        },
        document.querySelector('#menu > ul.menu')
    ],
    button: document.querySelector('.menu-button'),
});

coolMenu.create();

Источник данных может задаваться как ссылка на элемент UL на странице или как объект с дополнительными параметрами.

Поля объекта:

Option	Type	Default	Description
`container`	HTMLElement, null	`null`	Источник данных для меню
`selectorTitle`	String	`'a'`	Селектор для поиска заголовка пункта меню
`selectorList`	String	`'ul'`	Селектор для поиска вложенного списка пункта меню
`group`	object, null	`null`	Параметры группировки

Отдельные источники меню можно сгруппировать, оформив их как подменю. Параметры группировки:

Option	Type	Default	Description
`group.title`	String	`''`	Заголовок пункта меню
`group.link`	String	`'#'`	Ссылка пункта меню
`group.customItemClass`	String	`''`	Класс, который буден дописан к этому пункту
`group.customLinkClass`	String	`''`	Класс, который буден дописан к ссылке этого пункта

Стили следует подключить отдельно

@import './node_modules/cool-menu/cool-menu.scss';

В стилях доступно переопределение следующих переменных:

$cool-menu-z-index: 9999 !default;
$cool-menu-width: 320px !default;
$cool-menu-color: #475577 !default;
$cool-menu-clip-body-when-opened: false !default;

Опции

В качестве источника данных используется готовая разметка на странице, построенная на списках UL/OL. В параметр source передается массив DOM-элементов.

Option	Default	Description
`source`	`null`	Источник данных для меню
`button`	`null`	Кнопка переключения меню
`container`	`document.body`	Контейнер, в котором будет рендерится меню
`width`	`320`	Максимальная ширина меню
`delimiter`	`false`	Не используется
`headerText`	`'Menu'`	Заголовок меню
`rootClass`	`'cool-menu'`	CSS-класс
`stateOpenClass`	`'cool-menu_open'`	CSS-класс
`scrollPaneClass`	`'cool-menu__scroll-pane'`	CSS-класс
`closerClass`	`'cool-menu__closer'`	CSS-класс
`headerClass`	`'cool-menu__header'`	CSS-класс
`headerInnerClass`	`'cool-menu__header-in'`	CSS-класс
`headerActiveClass`	`'cool-menu__header_active'`	CSS-класс
`menuClass`	`'cool-menu__menu'`	CSS-класс
`menuItemClass`	`'cool-menu__item'`	CSS-класс
`menuLinkClass`	`'cool-menu__link'`	CSS-класс
`menuNestedClass`	`'cool-menu__nested'`	CSS-класс
`backdropClass`	`'cool-menu-backdrop'`	CSS-класс
`buttonOpenClass`	`'open'`	CSS-класс
`bodyOpenClass`	`'is-open-cool-menu'`	CSS-класс
`onShow`	`null`	Коллбэк на открытие меню
`onClose`	`null`	Коллбэк на закрытие меню

Публичные методы

Method	Description
`create()`	Создать меню.
`toggleMenu(state)`	Переключение отображения меню. Boolean параметр: true — показать меню, false — скрыть меню.