# raadmenu

> Hamburger menu for RAADHUIS websites

Latest version **2.0.4** (published 2018-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install raadmenu
pnpm add raadmenu
yarn add raadmenu
bun add raadmenu
```

## 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.4 |
| Published | 2018-06-22 |
| First published | 2018-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jonah Meijers |
| Maintainers | jonahmeijers |

## Links

- npm: https://www.npmjs.com/package/raadmenu
- npm.io page: https://npm.io/package/raadmenu

## Recent versions

- 2.0.4 (latest) — 2018-06-22
- 2.0.3 — 2018-06-22
- 2.0.2 — 2018-06-22
- 2.0.1 — 2018-06-22
- 2.0.0 — 2018-06-22
- 1.1.14 — 2018-06-22
- 1.1.13 — 2018-06-22
- 1.1.12 — 2018-06-22
- 1.1.11 — 2018-06-22
- 1.1.10 — 2018-06-22
- 1.1.9 — 2018-06-22
- 1.1.8 — 2018-06-22
- 1.1.7 — 2018-06-22
- 1.1.6 — 2018-06-22
- 1.1.5 — 2018-06-20
- … 8 more at https://npm.io/package/raadmenu/versions

## README

# RAADMENU
A simple, customisable hamburger menu solution

## Installation
1. Install via NPM or Yarn
```bash
npm install raadmenu || yarn add raadmenu
```

2. Import into your project files
```js
import RaadMenu from 'raadmenu';
```

For css you have two options:
```css
@import '~raadmenu/app.scss';
```
Or
```css
@import '~raadmenu/dist/index.css';
```

3. Create new RaadMenu
```js
const hamburger = new RaadMenu({
    nav: navElement, // existing <nav> element to copy innerHTML from
    container: containerElement, // existing <nav> element to put innerHTML into
    button: {
        content: '<button>Open</button>', // button string, removes all classes of top element
        position: 'topright' // 'topleft', 'topright', 'bottomleft' or 'bottomright'
    },
    position: 'left', // 'top', 'right', 'bottom' or 'left'
    style: 'full',
    animation: 'none', // 'slidein', 'popup', 'fadein' en 'none'
    onInit: function() {}, // fires after initialisation
    onOpen: function() {}, // fires on open
    onClose: function() {} // fires on close
})
```

4. Style to your heart's content
```css
.raadmenu {
    /* menu styling */
}

.raadbutton {
    /* button styling */
}

.raadlist {
    /* ul styling */
}

.raaditem {
    /* item styling */
}
```

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