raadmenu

RAADMENU

A simple, customisable hamburger menu solution

Installation

1. Install via NPM or Yarn

npm install raadmenu || yarn add raadmenu

1. Import into your project files

import RaadMenu from 'raadmenu';

For css you have two options:

@import '~raadmenu/app.scss';

Or

@import '~raadmenu/dist/index.css';

1. Create new RaadMenu

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
})

1. Style to your heart's content

.raadmenu {
    /* menu styling */
}

.raadbutton {
    /* button styling */
}

.raadlist {
    /* ul styling */
}

.raaditem {
    /* item styling */
}