Alireza Behnamnik Alireza Behnamnik - 1 month ago 8
CSS Question

move border to next li afte hover with animation

I create a navbar with 4 li and active class

Now i want when i hover on second li , my border-bottom move with animation from first li to second li

This is my navbar code:



.top-bar {
background:#0d0d0d;
width:100%;
height:85px;
position:fixed;
top:0;
z-index:99999;
}

.menu {
float: right;
margin: 16px 50px;
}
.menu li {
float: right;
color: #FFF;
list-style: none;
font-size: 18px;
padding: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 36px;
}

.menu li:hover {color:#8cc152;}

.active {
border-bottom:3px solid #8cc152;
color:#8cc152 !important;
}
.hvr {
position:relative;
}
.hvr:before {
content: '';
width: 5px;
height: 5px;
background: #8cc152;
position: absolute;
margin-top: 48px;
transform: rotate(45deg);
right:50%;
}

<div class="top-bar">
<div class="menu">
<a href="#"><li class="active hvr"> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
</div>
<div class="logo"></div>
</div>





I have not any demo or example. Can you help me?

Answer

Try this code

$(function(){
	var menu = $(".menu");
  var indicator = $('<span class="indicator"></span>');
  menu.append(indicator);
  position_indicator(menu.find("li.active"));  
  setTimeout(function(){indicator.css("opacity", 1);}, 500);
  menu.find("li").mouseenter(function(){
  	position_indicator($(this));
  });
  menu.find("li").mouseleave(function(){
  	position_indicator(menu.find("li.active"));
  });
  
  function position_indicator(ele){
  		var left = ele.offset().left - 10;
      var width = ele.width();
      indicator.stop().animate({
        left: left,
        width: width
      });
  }
});
.menu{background: #111;position: relative;}
.menu ul{list-style: none;text-align: right;}
.menu li{display: inline-block;}
.menu a{display: inline-block;text-decoration: none;color: #fff;padding: 15px 10px;text-align: center;}
.menu .indicator{border-bottom: 5px solid green;position: absolute;bottom: 0;width: 0;opacity: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu">
	<ul>
		<li><a href="">Menu 1</a></li>
		<li><a href="">Menu 2</a></li>
		<li class="active"><a href="">Menu 3</a></li>
		<li><a href="">Menu 4</a></li>
		<li><a href="">Menu 5</a></li>
	</ul>
</div>

Demo here https://jsfiddle.net/sasikumar3/j5jczkyn/

Comments