<div id="menu">
  <ul id="menu-list">
      <li> <a href="#">Home</a></li>
  	  <li> <a href="#">Gallery</a></li>
  	  <li> <a href="#">Contacts</a></li>
  	  <li> <a href="#">Blog</a></li>
   </ul>
   <div id="menu-line"></div>
</div>	
html, body, div {
		margin: 0;
		padding: 0;
		font-family: "Helvetica Neue", Helvetica, sans-serif;
}
		
#menu{
  
	  position: relative;
    text-align: center;
		margin: 100px;
}
		
#menu-line{
		display: block;
		position: absolute;
    left: 50%;
    top: 25px;
		width: 0;
		height: 5px;
		background-color: black;
}
		
ul{
		z-index: 100;
}
		
ul li {
		display: inline-block;
		margin-right: 30px;
}
		
ul li a{
		display: block;
		font-size: 20px;
		text-transform: uppercase;
    text-decoration: none;
		color: black;	
}	
$(function(){
			
			var currentIndex = 0;
			var _offset = 10;
			
			var $menuLi = $("#menu-list li");
			var $line = $("#menu-line");
			
			$menuLi.on("click", function(){
				
				var _$this = $(this);
								
				TweenMax.killTweensOf($line);
				
				if( _$this.index() > currentIndex ){
					
					TweenMax.to($line, 0.5, {css: {width:  (_$this.position().left + _$this.outerWidth()) - $line.position().left + _offset/2 }, onComplete:function(){
						currentIndex = _$this.index();
						TweenMax.to($line, 0.5, { css:{ left : _$this.position().left - _offset/2, width: _$this.outerWidth() + _offset } })
					} });
					
				} else {
					
					TweenMax.to($line, 0.5, {css: { left: _$this.position().left - _offset/2, width:  ($line.position().left + $line.outerWidth()) - _$this.position().left + _offset/2 }, onComplete:function(){
						currentIndex = _$this.index();
						TweenMax.to($line, 0.5, { css:{ width: _$this.outerWidth() + _offset } })
					} });
					
				}
								
			});	
						
		});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js