Navigation menu with effect on active state

Navigation menu with effect on active state using JavaScript for dynamically adding the element to active state.

See the Pen Navigation menu with continued hover effect by scanfcode (@scanfcode) on CodePen.


Navigation menu with effect on active state

Include:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

CSS:

HTML:

<div class="animate12">
	<ul>
		<li class="active"><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul>
</div>

JavaScript

<script>
$( document ).ready(function(){
  var menu = $(".animate12");

  var indicator = $('<span class="indicator"></span>');
  menu.append(indicator);
  position_border(menu.find("li.active"));  
  setTimeout(function(){indicator.css("opacity", 1);}, 500);
  menu.find("li").mouseenter(function(){
  	position_border($(this));
  });
  menu.find("li").mouseleave(function(){
  	position_border(menu.find("li.active"));
  });
  
  function position_border(e){
  	  var left = e.offset().left - 10;
      var width = e.width();
      indicator.stop().animate({
        left: left,
        width: width
      });
  }
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *