The function of this code is to show/hide divs by way of fadeIn/fadeOut, starting with an empty div (home) and fading in one of the other divs (work,cms,contact,) on click, then fading out the last div and fading in the next on click, and then fading out any div and fading in 'panel' (an empty div) when you click on home.
<script type='text/javascript'>
$(function(){
$('.panel').hide();
$('.work_button').click(function(){
$('#cms,#contact').fadeOut(function(){
$('#work').fadeIn();
});
});
$('.cms_button').click(function(){
$('#work,#contact').fadeOut(function(){
$('#cms').fadeIn();
});
});
$('.contact_button').click(function(){
$('#cms,#work').fadeOut(function(){
$('#contact').fadeIn();
});
});
$('.home_button').click(function(){
$('.panel:visible').fadeOut();
});
});
</script>
<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button">work</li>
<li class="cms_button">cms</a></li>
<li class="contact_button">contact</a></li>
</ul>
</div>
<div class="panel" id="work">
<p>...</p>
</div>
<div class="panel" id="cms">
<p>...</p>
</div>
<div class="panel" id="contact">
<p>...</p>
</div>