JSFiddle - React, Tailwind, and code Playground

HTML

<link href='https://simple-cursor.googlecode.com/svn/trunk/awesome.css' rel='stylesheet'/>
<div id="hidden-menu">
    <ul><li><a href="/" title="home"><i class="icon-home"></i>Home</a></li>
        <li><a href="#" title="Contack"><i class="icon-envelope"></i>Contack</a></li>
        <li><a href="#" title="Abouth"><i class="icon-user"></i>Abouth</a></li>
        <li><a href="#" title="Color-Piker"><i class="icon-th"></i>Color-Piker</a></li>
        <li><a href="#" title="more"><i class="icon-file"></i>More</a></li>
        <a class="tombol" href="#" title="open/close"></a>  
    </ul>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-layout="landscape" data-href="https://plus.google.com/109648847911535372958"></div>
    <div style="text-align:center;background:#000;color:#fff">Thank you for visiting</div>
</div>

CSS

body{background:#80FEC8}
#hidden-menu{width:300px;height:100%;background:#BFFFFE;font:normal 20px arial;position:fixed;top:0;right:-300px;transition:all 0.5s ease-in-out}
#hidden-menu:before{content:" Menu ";position:absolute;background:#80FE80;width:100%;padding:2%;text-align:center}
.tombol:before{content:"\f045 ";font-family:fontAwesome;position:absolute;top:0;left:-30px;background:#000;color:#fff;padding:5px}
.tombol:hover:before{color:#000;background:#006B6B}
#hidden-menu a{color:#333;text-decoration:none;display:block;padding:5px}
#hidden-menu a:hover{color:red;border-right:3px solid red;background:#BFFEBF}
#hidden-menu li{list-style:none;line-height:60px;border-bottom:1px dotted #aaa}
#hidden-menu.active {
	right:0;
}

JavaScript

$('.tombol').on('click', function(e) {

        e.preventDefault();

        $('#hidden-menu').toggleClass('active');

    });