JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu">
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor</a></li>
        <li class="current"><a href="#">Sit</a></li>
        <li><a href="#">Amet</a></li>
    </ul>

CSS

#menu_wrap {
    position: relative;
    margin: 60px;
    float: left;
}

.marker {
    width: 10px;
    height: 10px;
    background: #64CF00;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    width: 50px;
    display: none;
}

.Mhighlight {
    display: none;
    background: #83EC21;
    z-index: 6;
}

#menu {
    background: #444444;
    float: left;
}

#menu li {
    float: left;
}

#menu a { 
    float: left;
    padding: 10px; 
    color: #ffffff;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

#menu .current {
    background: #555555;
}

JavaScript

// Options
var Speed = 400;
var Easing = 'easeOutQuint';
var HighlightSpeed = 200;

var Menu = $('#menu');
    Menu.wrap('<div id="menu_wrap" />');

var MenuWrap = $('#menu_wrap');
    MenuWrap.prepend('<div class="marker"/><div class="marker Mhighlight"/>');

var Marker = $('.marker');
var Mhighlight = $('.Mhighlight');
var Menuli = $('#menu li');
var Current = $('.current');
var CurrentPosition = Current.position();

// DocumentReady action
$('.marker:not(.Mhighlight)').show();
Marker
    .height( Menu.height() )
    .stop().animate({
        width: Current.width(),
        left: CurrentPosition.left
    }, Speed, Easing);

Menuli.each(function(){

    // MouseEnter
    $(this).mouseenter(function(){
        
        var ThisPosition = $(this).position();
        Marker.stop().animate({
            width: $(this).width(),
            left: ThisPosition.left 
        }, Speed, Easing);
        
    });

    // Click
    $(this).click(function(){
        
        $('.current').removeClass();
        $(this).addClass('current');
        

    });
    
    $(this).mousedown(function() {
        Mhighlight
            .stop(true,true).fadeIn(HighlightSpeed)
            .delay(HighlightSpeed)
            .stop(true,true).fadeOut(HighlightSpeed)
    });

    

    // MouseLeave
        $(this).mouseleave(function(){
 
          var Current = $('.current');
          var CurrentPosition = Current.position();
  
        Marker.stop().animate({
            width: Current.width(),
            left: CurrentPosition.left
        }, Speed, Easing);
        
    });
    
});