JSFiddle - React, Tailwind, and code Playground

by Yudha dhesockerz

HTML

<nav class='nav' data-menu> <a class='menu-btn' href='#'>
    <i class='fa fa-bars'></i>
    <i class='fa fa-times'></i>
  </a>

    <ul class='unstyled-list nav-menu'>
        <li class='nav-item'> <a class='nav-item-link' href='https://plus.google.com/u/0/?tab=jX'>About</a>

        </li>
        <li class='nav-item'> <a class='nav-item-link' href='http://maseyudha.blogspot.com/p/blog-page.html'>Articles</a>

        </li>
        <li class='nav-item'> <a class='nav-item-link' href='https://plus.google.com/115569898720260900289?prsrc=5'>Fans Page</a>

        </li>
        <li class='nav-item'> <a class='nav-item-link' href='https://www.facebook.com/yudhadhesockerz'>Contact</a>

        </li>
    </ul>
</nav>

CSS

/* CSS Simple Menu */
 .unstyled-list {
    padding: 0;
}
.unstyled-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 140px;
    opacity: 0;
    backface-visibility: hidden;
    transform: translate3d(0, 20px, 0);
    visibility: hidden;
    box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.2);
    transition: all .2s ease, visibility 0s linear;
}
.nav {
    position: fixed;
    top: 5%;
    right: 2%;
    z-index: 102;
}
.nav.active .fa-bars {
    opacity: 0;
}
.nav.active .fa-times {
    opacity: 1;
    color: #fff;
    background: #f56954;
}
.nav.active .nav-menu {
    opacity: 1;
    transform: translate3d(0, 50px, 0);
    visibility: visible;
    transition-delay: 0s;
}
.menu-btn {
    display: block;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all .2s ease;
    text-align: center;
    position: relative;
    z-index: 1;
}
.menu-btn .fa {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    vertical-align: middle;
    transition: opacity .1s linear;
}
.menu-btn .fa-bars {
    opacity: 1;
    color: #fff;
}
.menu-btn .fa-times {
    opacity: 0;
}
.menu-btn:hover {
    background-color: #f56954;
    color: #fff;
}
.nav-item-link {
    display: block;
    font-size: 13px;
    color: #999;
    padding: 15px;
    background-color: #fff;
    transition: all .2s ease;
    border-bottom: 1px solid #e9e9e9;
}
.nav-item:last-child .nav-item-link {
    border-bottom: none;
}
.nav-item .nav-item-link i.fa.fa-home, .nav-item .nav-item-link i.fa.fa-paper-plane, .nav-item .nav-item-link i.fa.fa-list-alt, .nav-item .nav-item-link i.fa.fa-coffee {
    margin-right: 10px;
}
.nav-item-link:hover {
    background-color: #fcfcfc;
}
a.nav-item-link:hover {
    color: #1497ec;
}
.unstyled-list:before {
    bottom: 100%;
    right: 10%;
    border: solid transparent;
   ...

JavaScript

(function () {

    window.Menu = (function () {

        Menu.init = function () {

            return $('[data-menu]').each(function (idx, el) {

                return new Menu($(el));

            });

        };



        function Menu($el) {

            this.nav = $el;

            this.menubtn = $('.menu-btn', this.nav);

            this.menubtn.on('click', (function (_this) {

                return function (ev) {

                    _this.nav.toggleClass('active');

                    return false;

                };

            })(this));

        }



        return Menu;



    })();



    $(function () {

        if ($('[data-menu]').length) {

            return Menu.init();

        }

    });



}).call(this);