vue-cool-burger v1.0.3

vue-cool-burger

An animated foldout hamburger menu turned into a vue component.

usage

Important note: You need a wrapper with a defined width and height for this to work. check out the codesandbox for a quick demo.

npm install vue-cool-burger
# or 
yarn add vue-cool-burger

then add it to your vue application:

// add it to your vue application:
import VueCoolBurger from 'vue-cool-burger';
import Vue from 'vue';

Vue.use(VueCoolBurger);

// or

import VueCoolBurger from 'vue-cool-burger';

export default {
  components: {
    VueCoolBurger
  }
}

props

props shown with [] are optional

color = '#cdcdcd'

default color of menu bars

cross-color = '#cdcdcd'

the color of menu bars after transforming into cross

id = undefined

if you want to assign an id to the inner checkbox and for to the label around it

ariaLabel = 'main menu'

expanded = false

should it be rendered in cross form or not

events

expanded: Boolean

emits after the state of menu is changed. emits true if the new state is cross shape.

credits

original idea by Erik Terwan. but this works somewhat different now.