Hi Abbster 22, here is an example of how you could do something like the site you link to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Out Menu</title>
<style type="text/css">
#navigation {
height:240px;
left:0;
position:fixed;
top:0;
margin:0;
padding:0;
}
#navigation li {
list-style:none;
width:70px;
}
#navigation li a {
background-position:100% 0;
background-repeat:no-repeat;
display:block;
height:80px;
margin-left:-280px;
overflow:hidden;
text-indent:-1000px;
width:300px;
}
#navigation .home a {
background-image:url("http://i26.tinypic.com/11l7ls0.jpg");
}
#navigation .about a {
background-image:url("http://i29.tinypic.com/xp3hns.jpg");
}
#navigation .contact a {
background-image:url("http://i30.tinypic.com/531q3n.jpg");
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
/* Navigation */
if ($('#navigation')) {
var nav_resting_width = "-280px";
var nav_hover_width = "-60px";
var delay = 400;
$('#navigation > li').each(function(e) {
if ($('body').hasClass(this.className)) {
$('a', this).stop().animate({marginLeft:nav_hover_width}, 600);
}
else {
$(this).hover(function() {
$('a', this).stop().animate({marginLeft:nav_hover_width}, 200);
},
function () {
$('a', this).stop().animate({marginLeft:nav_resting_width}, 200);
});
}
});
}
if (document.body.id == 'home_page') {
$('#navigation > li').each(function(e) {
$('a', this)
.fadeTo(delay, .8)
.animate({marginLeft:nav_hover_width}, 200)
.animate({marginLeft:nav_resting_width}, 200);
delay += 100;
});
}
});
</script>
</head>
<body id="home_page">
<ul id="navigation">
<li class="home"><a href="/" title="Home">Home</a></li>
<li class="about"><a href="/about/" title="About">About</a></li>
<li class="contact"><a href="/contact/" title="contact">Contact</a></li>
</ul>
</body>
</html>
It's by no means perfect, but it could get you started. The code is mostly from his site, but you can find the same jquery posted elsewhere on the web, f.ex here (http://www.assembla.com/code/waves/subversion/nodes/Waves%202010%20Website/trunk/waves-site/index.html?rev=39)
I have edited it to get the tabs going further out and having some jpeg's as backgrounds. You can save the above code as an html document and open it your browser to see it in action.