hamburger-button

Простая кнопка-гамбургер для меню

Не включает в себя меню. Только кнопка.

Установка

npm install hamburger-button

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

Вставьте код кнопки в нужное место на вашей странице

<div class="hamburger" role="button"><span><span>≡</span></span></div>

Инициализация

import HamburgerButton from 'hamburger-button';

let hamburger = new HamburgerButton({
  mainClass       : 'hamburger',              // по умолчанию
  stateActiveClass: 'hamburger_state_active', // по умолчанию
  onOpen() { console.log('Открыто'); },
  onClose(){ console.log('Закрыто'); },
});

hamburger.toggle(); // Переключить состояние
hamburger.open();   // Открыть меню
hamburger.close();  // Закрыть меню

Если не используется модульный сборщик, скрипт можно подключить напрямую в страницу

<srcipt src="node_modules/hamburger-button/dist/hamburger.js"></script>

Подключите scss-миксин в ваш файл стилей и вызовите его:

import './node_modules/hamburger-button/hamburger.scss';

@include makeHamburgerButton((
    main-class: '.hamburger',
    width     : 3rem,
    height    : 3rem,
));

Javascript options

Option	Default	Description
mainClass	'hamburger'	CSS-class of block
stateActiveClass	'hamburger_state_active'	The class at which the button is in the open state
onOpen	null	Callback function that is called when you go to the open state
onClose	null	Callback function that is called when you go to the close state

Javascript API

Method	Description
toggle()	Toggle state of the button
open()	Toggle to open state of the button
close()	Toggle to close state of the button

SCSS options

Option	Default	Description
main-class	'.hamburger'	CSS-class of block
state-active-modifier	_state_active	The BEM modifier at which the button is in the open state
background	transparent	Background of the button
icon-color	currentColor	Color of the icon
width	50px	Width of the button
height	50px	Height of the button
icon-width	half of width	Width of the icon
icon-height	third of height	Height of the icon
icon-item-space-chunk	2
icon-item-height	calculate
icon-item-space	calculate