JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="menu">
<div id="magicline"></div>
<ul>
<li>books</li>
<li>home</li>
<li>videos</li>
<li>audios</li>
<li>tutorials</li>
<li>computers</li>
</ul>
</div>

CSS

body{ margin: 0; padding: 0}
#menu { list-style:none; padding:0px; position:relative; }

li { cursor: pointer; padding: 0 0 0 40px; line-height:40px; border-left:4px solid red; background:#abc;}

#magicline {position:absolute; top:0px; left:0px; height:40px;border-left:4px solid black;}

ul{margin:0px; padding:0px;}

JavaScript

$('#menu ul li').click(function(e) {
    var position = $(e.target).offset();
    $('#magicline').animate({'top':position.top},160);
});