# hamburger-button

> Simple hamburger button

Latest version **2.0.0** (published 2023-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install hamburger-button
pnpm add hamburger-button
yarn add hamburger-button
bun add hamburger-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-03-24 |
| First published | 2017-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | delphinpro |
| Maintainers | delphinpro |
| Keywords | hamburger, button |

## Links

- npm: https://www.npmjs.com/package/hamburger-button
- Repository: https://github.com/delphinpro/hamburger-button
- Homepage: https://github.com/delphinpro/hamburger-button#readme
- Issues: https://github.com/delphinpro/hamburger-button/issues
- npm.io page: https://npm.io/package/hamburger-button

## Recent versions

- 2.0.0 (latest) — 2023-03-24
- 1.0.2 — 2017-11-26

## README

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

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

## Установка
 
```
npm install hamburger-button
```

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

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

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

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

```javascript
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();  // Закрыть меню
```

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

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

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

```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    |                                                           |

---
_Source: https://npm.io/package/hamburger-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._