fiddle

nav bar

by Please_Reply

HTML

<div class="container"> <!-- This is the container -->
	<div class="header"> <!-- This is the header -->
    	<div style="float:left"> <!-- This is the logo -->
        	Logo (image)
        </div>
        <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
        <div style="float:right"> <!-- This is the navigation menu -->
        	<div style="position:relative"> <!-- This is the container of the navigation menu -->
            	<div id="slider"></div> <!-- This is the slider bar -->
            	<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
    			<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
    			<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
    			<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>
    <div class="body"> <!-- This is the body -->
    </div>
    <div class="footer"> <!-- This is the footer -->
    </div>
</div>

CSS

body{ /* Applies to the <body> tag */
	margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
	width:100%; /* This sets the width */
	height:100%; /* This sets the height */
	background-color:black; /* Sets the background colour */
}
.header{ /* The header class */
	width:100%;
	height:120px;
	background-color:#323232;
	color:white; /* The sets the colour of the font */
}
.body{
	width:100%;
	height:495px;
	background-color:white;
	color:black;
}
.footer{
	width:100%;
	height:50px;
	background-color:#323232;
	color:white;
}
div{
    display: inline-block;
    float:left;
}
#one, #two, #three, #four{
    background-color:#323232;
    height:96px;
	color:white;
	text-align:center;
	font-size:25px;
	font-family:"Myriad Pro";
}
#slider{
    background-color:#ed1c24;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    bottom:0;
}
.inside{
	margin-left:30px;
	margin-right:30px;
	padding-top:7px;
	pointer-events:none;
	margin-top:40px;
}

JavaScript

$(document).ready(function(){
      $("#slider").animate({
          "left": $(".item:first").position().left + "px",
          "width": $(".item:first").width() + "px"
        }, 0);
    
    $(".item").hover(function(){
       $("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);
    });
    
    $(".item").on( "mouseout",function(){
       $("#slider").stop(); $("#slider").animate({"left":$('#one').position().left+"px","width":$('#one').width()+"px"},500);
    });
});