JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div id="cmwmenu1" class="ddsmoothmenu ddcmwmenu" >
  <ul>
    <li class="active"><a href="">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Back to Article</a></li>
    <li><a href="#">How it Works?</a></li>
  </ul>
  <div class="floatr"></div>
</div>

CSS

#cmwmenu1 {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;

    text-align: center;
    }
ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

JavaScript

$(document).ready(function () {

  var dleft = $('#cmwmenu1 li.active').offset().left - $('#cmwmenu1').offset().left; 
  var dwidth = $('#cmwmenu1 li.active').width() + "px";

  $('.floatr').css({
      "left": dleft+"px",
      "width": dwidth
  });
    var li = $('li');
    li.click(function(){
        $this = $(this);
        li.removeClass('active').find('a').removeClass('active');
        $this.addClass('active').find('a').addClass('active');
    })
    
  li.hover(function(){

      var left = $(this).offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).width() + "px";
      var sictranslate = "translate("+left+"px, 0px)";


      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate
      });

  },

  function(){

      var left = $(this).siblings('li.active').offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).siblings('li.active').width() + "px";

      var sictranslate = "translate("+left+"px, 0px)";

      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate

      });

  })

});