README

vue-accordion-component

Simple hamburger menu component for mobile in Vue 2, check this DEMO

Install

NPM

Install the package:

npm install @profesia/vue-hamburger-menu-component --save-dev

Then import it in your project

import Vue from 'vue'
import { hamburgerMenu, hamburgerMenuButton } from '@profesia/vue-hamburger-menu-component'

new Vue({
    el: '#your-element',

    components: {
        hamburgerMenuButton,
        hamburgerMenu,
    },
});

Usage

Simply use it like so:

<hamburger-menu-button></hamburger-menu-button>
<hamburger-menu>
    ... your menu ...
</hamburger-menu>

Settings

setBreakPoint

There is possibility to set, which breakpoint should be used to change mobile menu to normal menu on.
You need to call hamburgerMenuComponent.changeOnBreakPoint to set new value. Set none for mobile menu on each size. Defaults to xs.

created() {
    hamburgerMenuComponent.changeOnBreakPoint = 'sm'
}

openMenu

You can call hamburgerMenuComponent.isOpened with true to open your menu on some action. Defaults to false.

hamburgerMenuComponent.isOpened = true

closeMenu

You can call hamburgerMenuComponent.isOpened with false to open your menu on some action. Defaults to false.

hamburgerMenuComponent.isOpened = false

Structure

Once the menu has been rendered, it'll create the following structure:

HTML

menu button

<div class="module-hamburger-menu-button hamburger-button-xs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="module-hamburger-menu module-hamburger-menu-open hamburger-xs">
    <div class="module-hamburger-menu-content">
        <div class="module-hamburger-menu-container">
            <!-- Your own menu -->
            <ul>
                <li><a href="#1">Link 1</a></li>
                <li><a href="#2">Link 2</a></li>
                ...
            </ul>
        </div>
    </div>
</div>

CSS

All CSS is based uppon this structure.

.module-hamburger-menu-button {
  ...
}

.module-hamburger-menu-button span {
  ...
}

Relative menu

Menu's default position is absolute, so menu is flying over your content on mobile. If you need to shift your content, add to your CSS this code.

.module-hamburger-menu-content{
  position: relative;
}

FAQ

Where can I see, how it works? - Go to DEMO and enjoy ;)
How can I provide feedback? - Send an email to vrtich@profesia.sk; any feedback is appreciated.

Release History

2.0.3 Add option none for changeOnBreakPoint prop to have hamburger menu on each size
2.0.2 Fix css position on opened menu
2.0.1 Edit styles for show/hide menu
2.0.0 Hamburger menu without Store
1.0.1 Fix README
1.0.0 Official release with docs
0.0.1 Initial release

Usage no npm install needed!