JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="container">

<div class="side-menu-button">
    <a class="close-menu" href="#">
        ☰ <span class="close-text">Fechar</span>
    </a>
</div>
<div class="side-menu">
    <ul class="nav-menu">
        <li> <a href="#">Menu</a>

            <ul class="nav-menu-sub">
                <li> 
                    <a href="/estilos" class="first">Estilos</a>
                </li>
                <li> 
                    <a href="/marcas">Marcas</a>
                </li>
                <li> 
                    <a href="<vtex.cmc:menuMobile/>" class="last">Daily Deals</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Minha Conta</a>

            <ul class="nav-menu-sub">
                <li> 
                    <a href="/account" class="first">Minha Conta</a>
                </li>
                <li> 
                    <a href="/account/orders">Meus Pedidos</a>
                </li>
                <li> 
                    <a href="/Institucional/central-de-atendimento" class="last">Atendimento</a>
                </li>
            </ul>
        </li>
        <li> 
            <a href="/checkout">Minha SAcola</a>
        </li>
    </ul>
</div>
    
</div>

CSS

* {
    margin:0 auto;
    padding:0;
    list-style:none;
    text-decoration:none;
    border:0;
    font-family:"Josefin Sans";
    box-sizing:border-box;
}
.container{width:480px;float:left;}
.side-menu-button {width:100%; float:left;}
.side-menu-button .close-menu {
    border:none;
    padding:6px 12px;
    font-size:26px;
    cursor:pointer;
    background-color:#f2f2f2;
    color:#202020;
    float:left;
}
.side-menu {
    transition:all 0.3s linear;
    transform: translate(-100%, 0);
    width:75%;
    background-color:#202020;
    float:left;
}
.close-text {display:none;}
.side-menu-visible {transform: translate(0, 0); display:inline-block;}
.side-menu .nav-menu > li > a {
    padding:15px;
    width:100%;
    float:left;
    color:#f2f2f2;
    text-transform:uppercase;
    border-top: 1px solid #414141;
    border-bottom: 1px solid #292929;
}
.side-menu .nav-menu-sub {
    width:100%;
    float:left;
    padding:0 2.5%;
    background:#303030;    
    border-bottom: 1px solid #292929;
    display:none;
}
.side-menu .nav-menu-sub a {
    padding:15px;
    width:100%;
    float:left;
    color:#f2f2f2;
    text-transform:uppercase;
    border-top: 1px solid #414141;
    border-bottom: 1px solid #292929;
}
.nav-menu-sub .first {border-top:none !important;}
.nav-menu-sub .last {border-bottom:none !important;}
@font-face {
    font-family:"Josefin Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Josefin Sans Light"), local("JosefinSans-Light"), url("http://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z04GofcKVZz6wtzX_QUIqsI.woff2") format("woff2"), url("http://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z2Fp2sMiApZm5Dx7NpSTOZk.woff") format("woff");
}

JavaScript

$(".side-menu-button .close-menu").on("click", function () {
    $(".side-menu, .close-text").toggleClass("side-menu-visible");
});

$(".nav-menu li").on("click", function () {    
    $(this).find(".nav-menu-sub").slideToggle("return false;");    
});