JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<div class="menu-wrapper">
    <div class="trigger-nav">Menu</div>
    <nav id="main-menu">
        <ul>
            <li><a href="#">Lorem ipusm</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a>
                <ul>
                    <li><a href="#">More lorem</a></li>
                    <li><a href="#">More ipsum</a></li>
                    <li><a href="#">DC</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </nav>
</div>

CSS

body {
    background:#ddd;
}
.menu-wrapper {
    min-width:56px;
    position:absolute;
    top:0;
    left:0;
}
nav {
    margin: 38px 0 0 0;
    transform-origin: 0% 0%;
    transform:rotate(90deg);
    transition: transform 500ms;    
    z-index:199;
    border:none;
}
.nav-visible nav {
    transform:rotate(0deg);
    transition: transform 500ms;
}
.trigger-nav {
    z-index: 299;
    position:inherit;
    left:0;
    padding:10px;
    background:black;
    color:white;
}
.trigger-nav:hover {
    background:white;
    color:black;
    cursor:pointer;
    
}
nav ul{
    margin:0;
    padding:0;
}
nav ul li{
    list-style-type:none;
    border-top: 1px solid white;
    background:black;
    z-index:199;
    position:relative;
}

nav ul li:hover{
    background:white;
}

nav ul li ul{
    z-index:99;
    position:relative;
    float:right;
    right:-100%;
    margin:-29px 7px 0 0;
    transform-origin: 0% 0%;
    transform:rotate(90deg);
    transition: transform 500ms;
}
nav ul li ul li{
}
nav li a{
    display:block;
    padding:5px 0;
    text-decoration: none;
    color:white;
    padding:5px;
}

nav li a:hover{
    color:black;
}

nav ul li:hover ul{
    transform:rotate(0deg);
    transition: transform 500ms;
}

JavaScript

$(document).ready(function () {
    $('.trigger-nav').click(function () {
        $('.menu-wrapper').toggleClass('nav-visible');
    });
});