JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div class="mobile-menu-wrapper">
    <div class="mobile-menu-control">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
<div class="mobile-menu">
    <ul>
        <li ><a href="#"><div class="header item-height" ><strong>The Main 1</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        
        </li>
           
        <li ><a href="#"><div class="header" ><strong>The Main 2</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        
        </li>
        
    </ul>
</div>
</div>

CSS

.mobile-menu-wrapper{
    position:fixed;
    left:-220px;
    width:260px;
    cursor:pointer;
}

div.mobile-menu {
    width:210px;
    
    float:left;
    background-color:#222;
}
.mobile-menu ul {
    list-style:none;
    margin:0;
    padding:0px;
    
}
.mobile-menu ul ul li {
    padding-left:8px;
    
}
.mobile-menu li {
    margin:0;
    padding:0;
}
.mobile-menu li, .mobile-menu li a {
    color:#fff;
    font-family:calibri, sans-serif;
    text-decoration:none;
}
.mobile-menu li li:hover {
    background-color:#111;
}
.mobile-menu .item-height{
    padding:10px 2px;
}

.mobile-menu-control {
    float:right;
    //border:1px solid green;
    cursor:pointer;
    background-color:#222;
    padding:5px;
}
.mobile-menu-control .bar {
    width:25px;
    margin:4px 0;
    border:2px solid #fdbd12;
}
.mobile-menu .header {
    color:#fdbd12;
    padding-left:4px;
    width:100%;
}

JavaScript

$(function() {
    var wrapper = $(".mobile-menu-wrapper");
    var mobileMenu = $(".mobile-menu");
    var mobileMenuWidth = mobileMenu.width();
    $(".mobile-menu-control").bind("click",function() {
        
        if(mobileMenu.hasClass("opened-menu")) {
            
           $(".mobile-menu-wrapper").animate({
               left:-(220)
               
           });
            mobileMenu.removeClass('opened-menu');
        }
        else 
        {
           $(".mobile-menu-wrapper").animate({
               left:0
           });
            mobileMenu.addClass('opened-menu');
        }
        
        
    });

})