JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<ul id="line-menu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Blog</a></li>
    <li><a href="#">Projects</a></li>
    <li class="current_page_item"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#line-menu {
    margin: 0;
    padding: 10px;
    background-color: #ddd;
    text-align: center;
    list-style-type: 0;
}
#line-menu li {
    display: inline-block;
    background-color: #fcc;
    margin: 0;
    padding: 5px 0;
}
#line-menu li#magic-line {
    top: 40px;
    left: 10px;
    height: 5px;
    padding: 0;
    background-color: red;
    position: absolute;
    display: inline-block;
}

JavaScript

$(window).bind("load", function () {
    var $lineMenu = $("#line-menu"),
        $active = $lineMenu.children('.current_page_item'),
        $magicLine = $("<li id='magic-line'></li>");

    $magicLine
        .width($active.width())
        .css("left", $active.position().left)
        .appendTo($lineMenu);

    $lineMenu.on('mouseenter mouseleave click', 'li:not(#line-menu)', function (e) {
        var $el = e.type == 'mouseleave' ? $active : $(this);

        if (e.type == 'click') {
            $el.addClass('active').siblings().removeClass('active');
            $active = $el;
        } else {
            $magicLine.stop().animate({
                left: $el.position().left,
                width: $el.width()
            });
        }
    });
});