JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="site_menu_switcher"></div>
<ul id="site_menu">
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>

CSS

#site_menu_switcher {
    position: relative;
    background: #34a9ce;
    color: #fff;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    cursor: pointer;
    min-width: 10px;
    min-height: 20px;
}
#site_menu_switcher:after {
    position: absolute;
    content: '=';
    width: 100%;
    height: 100%;
    top: 5px;
    left: 10px
}
#site_menu_switcher.open:after {
  content: '×';
}
#site_menu {
    position: absolute;
    left: -70px;
    transition: left .4s, transform .6s;
}
#site_menu.open {
    width: 300px;
    left: 0;
}

JavaScript

function _boot() {
    var btn = document.getElementById("site_menu_switcher");
    btn.addEventListener('click', switchMenu);
}

function switchMenu(e) {
		var menu = document.getElementById("site_menu");
    this.open = !this.open;
    if (this.open) {
        e.target.className = menu.className = "open";
    }
    else {
    		e.target.className = menu.className = "";
    }
}

_boot();