cool-menu v2.0.2

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 на странице или как объект с дополнительными параметрами.

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

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

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

@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-элементов.

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