<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 } })
} });
}
});
});
This Pen doesn't use any external CSS resources.