JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navlist">
   <li><a href="#">Item one</a></li>
   <li><a href="#">Item two</a></li>
   <li><a href="#">Item three</a></li>
   <li><a href="#">Item four</a></li>
   <li><a href="#">Item five</a></li>
</ul>

CSS

.hidden {
  visibility: hidden;
}
#navlist {
  position: relative;
}

JavaScript

var $navlist = $('#navlist');
var pos1 = $("li", $navlist).eq(0).position();
var reset = {
    marginLeft: 0,
    marginTop: 0
};
var d = 'dummy',
    h = 'hidden',
    f = 'fast',
    s = 'slow',
    o0 = {'opacity':0},
    o1 = {'opacity':1};
$navlist.on('click', 'a', function() {
    var $li = $(this).closest('li').stop(true,true);
    var $sibs = $li.siblings().stop(true,true);
    $navlist.toggleClass(d);
    if ($navlist.hasClass(d)) {
        $sibs.animate(o0, f, function() {
            $sibs.css(o1).addClass(h);
            var pos = $li.position(); 
            $li.animate({
                marginLeft: pos1.left - pos.left,
                marginTop:  pos1.top -  pos.top
            }, s);
        });
    }
    else {
        $li.animate(reset, s, function() {
            $sibs.css(o0).removeClass(h).animate(o1, f);
        });
    }
    return false;
});