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 — скрыть меню.