<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Animated Bootstrap Nav</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a><span class="hover"></span></li>
<li><a href="#">Services</a><span class="hover"></span></li>
<li><a href="#">Portfolio</a><span class="hover"></span></li>
<li><a href="#">Blog</a><span class="hover"></span></li>
<li><a href="#">Contact</a><span class="hover"></span></li>
</ul>
</div>
</div>
</nav>
body{
background:#192226 !important;
}
.navbar-inverse{
background:#222B31 !important;
border-bottom:4px solid #EE445F !important;
}
.navbar-brand{
font:12px Lato !important;
text-transform:uppercase;
color:#FFF !important;
letter-spacing:2px;
margin-top:2px;
}
.nav{
margin-bottom:0px;
a{
font:500 11px Lato;
letter-spacing:2px;
padding:16px !important;
color:#a3bfc6 !important;
text-transform:uppercase;
position:relative;
z-index:1000;
}
a:hover{
color:#FFF !important;
}
li{
position:relative;
}
}
.navbar-inverse .navbar-toggle{
border:none;
}
.navbar-collapse{
box-shadow:none !important;
border:none !important;
}
.navbar-inverse .navbar-toggle:hover{
background:transparent !important;
}
.navbar-inverse .navbar-toggle:focus{
background:transparent !important;
}
.navbar-inverse .navbar-toggle:active{
background:transparent !important;
}
.icon-bar{
background:#a3bfc6 !important;
}
.hover{
display:block;
position:absolute;
width:0%;
height:100%;
top:0px;
left:0px;
background:#EE445F !important;
z-index:0;
opacity:0;
}
@media (max-width: 767px) {
.nav{
padding-bottom:20px;
a{
padding:12px !important;
}
}
}
@media (max-width: 480px) {
.nav{
padding-bottom:20px;
}
}
View Compiled
$( "li" ).hover(
function() {
$(this).find("span").stop().animate({
width:"100%",
opacity:"1",
}, 400, function () {
})
}, function() {
$(this).find("span").stop().animate({
width:"0%",
opacity:"0",
}, 400, function () {
})
}
);
This Pen doesn't use any external CSS resources.