mgn-menu ( Don't Need jQuery )

Implement function to operate hamburger menu's opening and closing.
When menu button is clicked, class is added/deleted in response to menu button and global navigation.

• Target browser : IE9+

Install

npm i mgn-menu -S

Or Download raw data

↓ download "mgn-menu.js"

Import

import mgnMenu from 'mgn-menu';

Constructor

new mgnMenu( element [, option] )

|Argument|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |element|String|-(Required)|Specify target element.ex) ".j-menu"| |option|Object|-|ex) option = { globalNav: "#globalnav", activeName: "open", noScroll: false, closePoint: 768}|

|Option|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |globalNav|String|"#globalnav"|Specify global navigation's ID or Class.| |activeName|String|"active"|Specify class to assign.| |noScroll|Boolean|true|Specify whether to scroll back content.| |closePoint|Number|Null|Specify the boundary value to forcefully close the global navigation.|

Method

|Method|Argument|Description| |:-------|:--------|:------| |Open( element )|String|Open Menu.| |Close( element )|String|Close Menu.| |OpenStart = function(){};|-|To be executed before opening Menu.| |CloseEnd = function(){};|-|To be executed after closing Menu.| |CloseStart = function(){};|-|To be executed before opening Menu.| |CloseEnd = function(){};|-|To be executed after closing Menu.|

Demo

https://frontend-isobar-jp.github.io/mgn-menu/

import mgnMenu from 'mgn-menu';

let menu = new mgnMenu(
    ".j-menu",
    {
        globalNav: "#gNav",
        activeName: "open",
        closePoint: 768,
        noScroll: false
    }
);

menu.Open();

setTimeout(function() {

    menu.Close();

},1000);

menu.OpenStart = function() {
    console.log("openStart")
}
menu.OpenEnd = function() {
    console.log("openEnd")
}
menu.CloseStart = function() {
    console.log("closeStart")
}
menu.CloseEnd = function() {
    console.log("closeEnd")
}