JSFiddle - React, Tailwind, and code Playground

by Hernani Mattos

HTML

<ul class="menu" id="menu-principal"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29" id="menu-item-29"><a href="">O Escritório</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-31" id="menu-item-31"><a href="http://localhost/passioni/?cat=4">Expertise</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28" id="menu-item-28"><a href="">Profissionais</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" id="menu-item-30"><a href="">Notícias e Publicações</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32" id="menu-item-32"><a href="">Links</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27" id="menu"><a>Contato</a></li>
</ul>
 <div class="seta-nav"></div>

CSS

.menu {
  margin-left: 145px;
  padding: 10px 10px 10px 10px;
  display: inline-block;
}
.menu li {
  display: inline-table;
  padding-left: 20px;
  margin-left: 7px;
}
.menu li a {
  color: orange;
  display: block;
  text-transform: uppercase;
}

.seta-nav{
		width: 15px;
		height: 8px;
		background-color:blue;
		margin-left: -1000px;
	}

JavaScript

function currSeta(){
     $('.menu li').mouseover(function(event) {
     $tam = ($(this).width() + 35) / 2;
     $pos = $(this).position();
     $('.seta-nav').css({
      'margin-left': $pos.left + $tam + 'px' ,
      'transition' : '1s',    
  });

});

}

function voltaCurr(){
      $tam = ($('li.current-menu-item').width() + 35) / 2;
      $pos = $('.current-menu-item').position();
      $('.seta-nav').css({'margin-left': $pos.left + $tam + "px"});

}


    currSeta();

        $('ul.menu').mouseout(function(event) {

          $('.seta-nav').css({

            'margin-left': '-1000px',
            'transition' : '5s',

          });


        });


     
      voltaCurr();

      $(this).mouseout(function(event) {

      voltaCurr();

      }); 

    currSeta();