Burger Icon from HTML & CSS only without any external Icon font

by Konstantin Rouda

HTML

<script src="https://fonts.googleapis.com/css?family=Raleway:400,500,600"></script>
    <nav class="nav-container">
        <span class="menu-icon"></span>
        <div class="menu-container">
            <ul class="menu">
                <li class="menu__item"><a href="https://twitter.com/KonstantinRouda">Home</a></li>
                <li class="menu__item"><a href="https://twitter.com/KonstantinRouda">Projects</a></li>
                <li class="menu__item"><a href="https://twitter.com/KonstantinRouda">Price Plan</a></li>
                <li class="menu__item"><a href="https://twitter.com/KonstantinRouda">About</a></li>
                <li class="menu__item"><a href="https://twitter.com/KonstantinRouda">Links</a></li>
            </ul>
        </div>
    </nav>

CSS

HTML {
    font-size: 100%;
    line-height: 1.5;
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

BODY {
    margin: 0;
    min-height: 100vh;
}

UL {
    list-style: none;
    margin: 0;
    padding: 0;
}

LI {
    display: inline-block;
}

.nav-container {
    min-height: 4em;
    background: #fff;
    color: #342c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    padding: .2em .3em;
    text-align: center;
}

.menu-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    padding-top: 5em;
    z-index: 5;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    background: rgba(255, 255, 255, 0.76);
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.menu-container.open {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.menu {
    display: block;
    margin: 1em auto;
}

.menu__item {
    display: block;
    margin-bottom: 1em;
}

.menu__item > A {
    display: block;
    text-decoration: none;
    padding: 1em;
    font-size: 1.5em;
    color: currentColor;
}

.menu__item:hover {
    background: rgba(178, 178, 178, 0.2);
}


/*#region MENU ICON USING ONLY SINGLE SPAN ELEMENT */

.menu-icon {
    float: left;
    position: relative;
    z-index: 6;
    margin: 1.5em 0 0 1.5em;
    width: 35px;
    height: 5px;
    background: currentColor;
    cursor: pointer;
    -moz-transition: background .2s .25s;
    -o-transition: background .2s .25s;
    -webkit-transition: background .2s .25s;
    transition: background .2s .25s;
}

.menu-icon::before,
.menu-icon::after {
   ...

JavaScript

/// By Konstantin Rouda
/// LinkedIn: https://il.linkedin.com/pub/konstantin-rouda/8a/2a9/262 
/// Twitter: https://twitter.com/KonstantinRouda




    var menuIcon = document.querySelector(".menu-icon");
    var menu = document.querySelector(".menu-container");
    var menuOpenClassRegExp = /\bopen\b/;

    menuIcon.addEventListener("click", function (e) {
        if (menuOpenClassRegExp.test(e.target.className)) { // if open, then close
            e.target.className = e.target.className.replace(menuOpenClassRegExp, "").trim();
            menu.className = menu.className.replace(menuOpenClassRegExp, "").trim();
        } else { // if close, then open
            e.target.className += " open";
            menu.className += " open";
        }
    });