JavaScript Menu Library

This JavaScript code snippet helps you to create a menu library. It contains a set of functions that can be used to modify the class of an HTML element. The first three functions – hasClass, addClass, and removeClass – are designed to check if an element has a particular class, add a class to an element, and remove a class from an element, respectively. These functions are then used in the toggle menu function, which toggles the presence of the “open” class on the body element whenever the user clicks on the element with the ID “menu-toggle”. Finally, the init function adds an event listener to the “menu-toggle” element.

Finally, document.addEventListener ensures that the init function is only called after the HTML document has loaded completely.

How to Create JavaScript Menu Library

First of all, load the following assets into the head tag of your HTML document.

<link href='https://fonts.googleapis.com/css?family=Roboto:300,900' rel='stylesheet' type='text/css'>

Create the HTML structure for the menu library as follows:

<nav id="menu" role="navigation">
        <div class="brand">&Aopf;</div>            
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </nav>
    <div class="page-wrap">
        <button id="menu-toggle"></button>
        <div class="container" role="main">
            <article>
                <h2>Vanilla Javascript push menu</h2>
                    <p>Sometimes you just need a really simple push menu, without any Javascript Libraries. I made this in a rush for a client with the instructions to not use any jQuery.</p>
                    <p>I like the thought of adding a class to the body and climb the DOM instead of adding classes to the affected elements.</p>
                    <p>Less is more.</p>
            </article>
      </div>
   </div>

Style the menu library using the following CSS styles:

body {
    width: 100%;
    height: 100%;
    margin: 0;

    font-family: "Roboto", sans-serif;

    color: #fff;
    background-color: #232629;
}

p {
    line-height: 1.7;
}
h2 {
    margin-top: 30px;

    font-size: 1.7em;
    line-height: 1;

    letter-spacing: 2px;
    text-transform: uppercase;
}
/* PUSH MENU */
#menu {
    position: fixed;
    top: 0;
    left: -300px;

    width: 300px;
    height: 100%;
    padding: 50px 30px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
    text-align: center;

    background-color: #fff;
}
#menu .brand {
    height: 51px;

    font-size: 70px;
    font-weight: 900;
    line-height: .6;

    color: #ddd;
}
#menu ul {
    padding: 0;
    margin-top: 30px;
}

#menu ul li a {
    display: block;

    font-weight: 900;
    line-height: 50px;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    text-decoration: none;
    text-transform: uppercase;

    color: #232629;
    border-top: 1px solid #eee;
}
#menu ul li:last-child a {
    border-bottom: 1px solid #eee;
}
#menu ul li a:hover {
    letter-spacing: 1px;
}
body.open #menu {
    left: 0;
}
/* MAIN PAGE */
.page-wrap {
   
    padding: 50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
}
body.open .page-wrap {
    margin-left: 300px;
}

/* MENU TOGGLE ICON */

button:focus {
    outline: none;
}
#menu-toggle {
    position: relative;

    width: 51px;
    height: 51px;

    cursor: pointer;

    border: none;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #fff;
}
#menu-toggle:before,
#menu-toggle:after {
    position: absolute;

    content: "";
    content: "";
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    background-color: #232629;
}

#menu-toggle:before {
    top: 12px;
    left: 25px;

    width: 1px;
    height: 27px;
}
#menu-toggle:after {
    top: 25px;
    left: 12px;

    width: 27px;
    height: 1px;
}

body.open button#menu-toggle:before,
body.open button#menu-toggle:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* CONTENT CONTAINER */
.container {
    max-width: 600px;
    min-width: 200px;
    margin: 0 auto;
}

Finally, add the following JavaScript function for its functionality:

//Exelent little functions to use any time when class modification is needed
function hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

//Add event from js the keep the marup clean
function init() {
    document.getElementById("menu-toggle").addEventListener("click", toggleMenu);
}

//The actual fuction
function toggleMenu() {
    var ele = document.getElementsByTagName('body')[0];
    if (!hasClass(ele, "open")) {
        addClass(ele, "open");
    } else {
        removeClass(ele, "open");
    }
}

//Prevent the function to run before the document is loaded
document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});

That’s all! hopefully, you have successfully created the JavaScript menu library. If you have any questions or suggestions, feel free to comment below.