Code
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
var easing_type = 'easeOutBounce';
var default_dock_height = '40';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;
$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});
$(window).resize(function () {
updated_height = $(window).height() - default_dock_height;
$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});
$('#dock').mouseover(function () {
expanded_height = $(window).height() - expanded_dock_height;
$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
body_height = $(window).height() - default_dock_height;
$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>
Code
<div id="fake-body">
<!-- Put your entire website in this section -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="dock">
<!-- Put your dock in this section -->
</div>