JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mynav">
  <li><a href="#">Option1</a>
  </li>
  <li><a href="#">Option2</a>
  </li>
  <li><a href="#">Option3</a>
  </li>
  <li><a href="#" class='selected'>技术&#8226;开发</a>
  </li>
  <li><a href="#">设计&#8226;界面</a>
  </li>
  <li><a href="#">新闻&#8226;快讯</a>
  </li>
  <li><a href="#">关于&#8226;工具</a>
  </li>
</ul>

CSS

.slideNav {

    background: #000;
    width: 900px;
    list-style: none outside none;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    margin: 90px auto;
    height: 33px; 
    -moz-border-radius:8px; 
    -khtml-border-radius:8px; 
    -webkit-border-radius:8px;
    border-radius:8px;
   }
   .slideNav_li{
    float: left;
    height:33px;
    line-height:33px;
    padding:0 5px;
    color: #BBB;
   }
   .slideNav_li_a {
   display: block;
   text-decoration: none;
   color: #CCC;



   }

JavaScript

$.fn.slideNav = (function($) {

  var curUl,curA;
  var orignLeft, orignWidth;
  var conf = {
      navWidth:700,
      slideTime:600,
      slideColor:"red"


  }
  var back = $('<li class="slideNav_li" style="border:3px solid;position:absolute;z-index:-100"></li>');

  function init() {
      bindClass();
      bindEvent();
      window.onresize=bindEvent;
    
  };

  function bindClass(){
    curA=$(curUl).addClass("slideNav").find("li").addClass("slideNav_li").find("a").addClass("slideNav_li_a");
    back.css({"border-color":conf.slideColor,"box-shadow":"0 0 10px "+conf.slideColor});
    curUl.css("width",conf.navWidth+"px");
  };

  function bindEvent(){
    curA.each(function(i) {
      var p = $(this).parent();
      var width = p.width();
      var left = p.offset().left - 3;
      var top = p.offset().top - 3;
      if ($(this).hasClass("selected")) {
        back.appendTo($(curUl)).css("width", width).css("left", left).css("top", top);
        orignLeft = left;
        orignWidth = width;

      };


      p.hover(function(event) {
        animateTo(left, width);
      }, function() {
        animateTo(orignLeft, orignWidth);

      });



    });

  };

  function animateTo(left, width) {

    back.stop().animate({
      'left': left,
      'width': width
    }, conf.slideTime,"swing");

  };

  return function(options) {
    curUl = this;
    $.extend(conf,options);
    init();


  };


})($);


$(function() {

  $("#mynav").slideNav();




});