JSFiddle - React, Tailwind, and code Playground

by rabelais

HTML

<div id="menu">
<a href="#">Work</a>
</div>

<div class="hidden hover" id="black"><a href="#">Black</a></div>
<div class="hidden hover" id="igna" ><a href="#">Inga</a>
</div>
<div class="hidden hover" id="fatal"><a href="#">Fatal</a>
</div>


<div class="hidden hover" id="igna-1"><a href="#">1</a></div>
<div class="hidden hover" id="igna-2" ><a href="#">2</a></div>

CSS

#fatal {
  bottom: 34px;
    float: right;
    left: 135px;
    margin-left: 36px;
    position: fixed;
    white-space: nowrap;
    z-index: 1;
    
}
#black {
  bottom: 61px;
    float: right;
    left: 171px;
    margin-bottom: 18px;
    position: fixed;
    white-space: nowrap;
    z-index: 1;
}
#igna {
    bottom: 52px;
    float: right;
    left: 171px;
    margin-bottom: 5px;
    position: fixed;
    white-space: nowrap;
    width: 270px;
    z-index: 1;
  
}


#igna-1 {
	  bottom: 72px;
    left: 404px;
    margin-bottom: 7px;
    position: fixed;
    white-space: nowrap;
    width: 162px;
    z-index: 1;
}
#igna-2 {
    bottom: 57px;
    left: 82px;
    margin-left: 321px;
    position: fixed;
    white-space: nowrap;
    width: 162px;
    z-index: 1;
}
#menu {
	bottom: 34px;
    left: 38px;
    position: fixed;
    z-index: 4;
   background-color: #ffffff;
}
.hidden {
    display: none;
}
}

JavaScript

$('#menu').click(function () {
    if ($('#fatal').css('display') == 'none') {
        $('#fatal').animate({ left: 'toggle' }, 300);
        window.setTimeout(function () {
            $('#igna, #black').slideToggle("slow");
        }, 100);
    }
      
    else {
        $('#black, #igna, #igna-1').slideUp("fast");

        window.setTimeout(function () {
            $('#fatal, #igna-2').animate({ left: 'hide' }, 300);
        }, 300);
    }
   
});
$('#igna').click(function () {
    if ($('#igna-2').css('display') == 'none') {
        $('#igna-2').animate({ left: 'show' }, 300);
        window.setTimeout(function () {
            $('#igna-1').slideToggle("slow");
        }, 300);
    }
      
    else {
        $('#igna-1').slideToggle("fast");

        window.setTimeout(function () {
            $('#igna-2').animate({ left: 'hide' }, 300);
        }, 300);
    }
    });