<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>  
<ul id="navigation">
<li class="home"><a title="Home">Home</a></li>
<li class="about"><a title="About">About</a></li>
<li class="search"><a title="Search">Search</a></li>
<li class="photos"><a title="Photos">Photos</a></li>
<li class="contact"><a title="Contact">Contact</a></li>
</ul>

<script type="text/javascript">
$(function() {  
var d=300;  
$('#navigation a').each(function(){  
var $this = $(this);  
var r=Math.floor(Math.random()*41)-20;  
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});  
$('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});  
$this.stop().animate({  
'marginTop':'-70px'
},d+=150);  
});  
$('#navigation > li').hover(  
function () {  
var $this = $(this);  
$('a',$this).stop().animate({  
'marginTop':'-40px'  
},200);  
},  
function () {  
var $this = $(this);  
$('a',$this).stop().animate({  
'marginTop':'-70px'  
},200);  
}  
).click(function(){  
var $this = $(this);  
var name = this.className;  
$('#content').animate({marginTop:-600}, 300,function(){  
var $this = $(this);  
var r=Math.floor(Math.random()*41)-20;  
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});  
$('#content div').hide();  
$('#'+name).show();
$this.animate({marginTop:-200}, 300);
})
});  
});  
</script>