0.0.2 • Published 5 years ago
mgn-menu v0.0.2
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 -SOr Download raw data
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")
}