JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<button>Toggle menu</button>
<ul class="main-menu">
    <li>
        <span data-text="Title of Lorem Ipsum">Title of Lorem Ipsum</span>
        <ul class='submenu'>
            <li data-text="Sumbenu item 1"><a href="#link">Submenu item 1</a></li>
            <li data-text="Sumbenu item 2"><a href="#link">Submenu item 2</a></li>
            <li data-text="Sumbenu item 3"><a href="#link">Submenu item 3</a></li>
        </ul>
    </li>
</ul>

CSS

.main-menu {
    position: absolute;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;    
    -webkit-transform: translate3d(0, 0, 0) translateY(-120%);
	transform: translate3d(0, 0, 0) translateY(-120%);    
}
.active-menu {
    -webkit-transform: translateY(0%);
	transform: translateY(0%);    
}
.submenu li {
    position: relative;
}
.submenu a {
    display: block;
    overflow: hidden;
    color: transparent;
    text-align: left;
    padding: 10px;
    width: 100%;

}
.submenu li:before {
     background: #ccc;
     content: attr(data-text);
    padding: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0) translateX(-120%);
	transform: translate3d(0, 0, 0) translateX(-120%);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
.active-menu .submenu li:before {
    -webkit-transform: translate3d(0, 0, 0)  translateX(0%);
    transform: translate3d(0, 0, 0)  translateX(0);
}

JavaScript

var showMenu = function() {
    var $elem = $('.main-menu'),
        activeClass = 'active-menu',
        isActive = $elem.hasClass(activeClass);
    if(isActive) {
        console.log('active');
         $elem.removeClass(activeClass);   
    } else {
        $elem.addClass(activeClass);
    }   
}

$('button').on('click', showMenu);