<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="">
<title>Title</title>
<!--<link rel="stylesheet" href="no_styles_here_but_later_style.css"> -->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.0.3.js"
type="text/javascript"></script>
<!--<![endif]-->
<style type="text/css">
@charset "utf-8";
/* CSS Document */
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
min-height:100%;
}
#wrapper{
background:#666666;
height:100%;
width:100%;
min-width:970px;
}
#head{
width:100%;
height:100px;
background:#333;
position:fixed;
}
#nav{
height:100%;
width:970px;
margin:0 auto;
}
.button{
width:25%;
height:100%;
background:#666666;
float:left;
}
.button:hover{
background:#00FFFF;
}
/***body***/
#body{
width:100%;
height:95%;
overflow:hidden;
}
.column{
height:100%;
float:left;
}
.front-cover{
width:21.66666666666667%;
}
.back-cover{
width:35%;
}
#home{
background:#006699;
}
#about{
background:#993300;
}
#media{
background:#F36;
}
#contact{
background:#0C9;
}
.orig_width{
width:200px;
}
.expanded_width{
width:400px;
}
#foot{
background:#000000;
height:5%;
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="nav">
<div class="button" id="home_nav">Home</div>
<div class="button" id="about_nav">About</div>
<div class="button" id="media_nav">Media</div>
<div class="button" id="contact_nav">Contact</div>
</div>
</div>
<div id="body">
<div id="home" class="column orig_width"></div>
<div id="about" class="column orig_width"></div>
<div id="media" class="column orig_width"></div>
<div id="contact" class="column orig_width"></div>
</div>
<div id="foot"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#nav div').click(function() {
console.log($(this).attr( "id" ));
top_nav = $(this).attr( "id" );
var top_nav = top_nav.split("_");
ldiv = 'div#' + top_nav[0];
$('#body div').each(function( index ) {
$(this).animate({ width: "200px" }, 1000 );
});
$(ldiv).animate({ width: "400px" }, 800 );
});
});
</script>
</body>
</html>
JP this is the code right here. Or try this Fiddle:
http://jsfiddle.net/4Z6Wq/
