mgn-menu

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.

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

Default


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

menu.Open();

setTimeout(function() {

    menu.Close();

},1000);

menu.OpenEnd = function() {
    console.log("openEnd")
}
menu.CloseEnd = function() {
    console.log("closeEnd")
}


<header>
    <div class="j-menu"><a><span></span></a></div>
</header>
<nav id="gNav">
    global navi
</nav>


header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 20px;
}
.j-menu a {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.j-menu a:before,
.j-menu a:after,
.j-menu a span {
    content: "";
    display: block;
    width: 20px; height: 2px;
    background: #000;
    position: absolute;
    right: 0;
    transition: all 0.3s ease 0s;
}
.j-menu a:before { top: 3px; }
.j-menu a:after { bottom: 3px; }
.j-menu a span { top: 50%; margin-top: -1px; }
.j-menu.open a:before,
.j-menu.open a:after { top: 50%; bottom: auto; }
.j-menu.open a span { opacity: 0; }
.j-menu.open a:before { transform: rotate(-45deg); }
.j-menu.open a:after { transform: rotate(45deg); }

/* ============ #gNav */
#gNav {
    position: fixed;
    top: 60px; left: 0;
    background: rgba(0,0,0,0.6);
    transform: translate(-100%);
    color: #FFF;
    transition: all 0.3s ease 0s;
    width: 340px; height: 100%;
    padding: 30px;
}
#gNav.open { transform: translate(0%); }