<link type="text/css" href="/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />  
  <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>  
<script type="text/javascript">
$(function() {
var $menu = $('#mb_menu'),
$menuItems = $menu.children('a'),
$mbWrapper = $('#mb_content_wrapper'),
$mbClose = $mbWrapper.children('.mb_close'),
$mbContentItems = $mbWrapper.children('.mb_content'),
$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
$mbPattern = $('#mb_pattern'),
$works = $('#mb_imagelist > li'),
$mb_bgimage = $('#mb_background > img'),

Menu = (function(){

var init = function() {
preloadImages();
initPlugins();
initPattern();
initEventsHandler();
},
//preloads the images for the work area (data-bgimg attr)
preloadImages = function() {
$works.each(function(i) {
$('<img/>').attr('src' , $(this).children('img').data('bgimg'));
});
},
//initialise the jScollPane (scroll plugin)
initPlugins = function() {
$mbContentInnerItems.jScrollPane({
verticalDragMinHeight: 40,
verticalDragMaxHeight: 40
});
},
/*
draws 16 boxes on a specific area of the page.
we randomly calculate the top, left, and rotation angle for each one of them
*/
initPattern = function() {
for(var i = 0; i < 16 ; ++i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50

$el = $('<div>').css({
opacity : o,
top : t + 'px',
left : l + 'px'
});

if (!$.browser.msie)
$el.transform({'rotate' : a + 'deg'});

$el.appendTo($mbPattern);
}
$mbPattern.children().draggable(); //just for fun
},
/*
when the User closes a content item, we move the boxes back to the original place,
with new random values for top, left and angle though
*/
disperse = function() {
$mbPattern.children().each(function(i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $(this),
param = {
width : '50px',
height : '50px',
opacity : o,
top : t + 'px',
left : l + 'px'
};

if (!$.browser.msie)
param.rotate = a + 'deg';

$el.animate(param, 1000, 'easeOutExpo');
});
},
initEventsHandler = function() {
/*
click a link in the menu
*/
$menuItems.bind('click', function(e) {
var $this = $(this),
pos = $this.index(),
speed = $this.data('speed'),
easing = $this.data('easing');
//if an item is not yet shown
if(!$menu.data('open')){
//if current animating return
if($menu.data('moving')) return false;
$menu.data('moving', true);
$.when(openItem(pos, speed, easing)).done(function(){
$menu.data({
open : true,
moving : false
});
showContentItem(pos);
$mbPattern.children().fadeOut(500);
});
}
else
showContentItem(pos);
return false;
});

/*
click close makes the boxes animate to the top of the page
*/
$mbClose.bind('click', function(e) {
$menu.data('open', false);
/*
if we would want to show the default image when we close:
changeBGImage('images/default.jpg');
*/
$mbPattern.children().fadeIn(500, function() {
$mbContentItems.hide();
$mbWrapper.hide();
});

disperse();
return false;
});

/*
click an image from "Works" content item,
displays the image on the background
*/
$works.bind('click', function(e) {
var source = $(this).children('img').data('bgimg');
changeBGImage(source);
return false;
});

},
/*
changes the background image
*/
changeBGImage = function(img) {
//if its the current one return
if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
return false;

var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
$itemImage.insertBefore($mb_bgimage);

$mb_bgimage.fadeOut(1000, function() {
$(this).remove();
$mb_bgimage = $itemImage;
});
$itemImage.fadeIn(1000);
},
/*
This shows a content item when there is already one shown:
*/
showContentItem = function(pos) {
$mbContentItems.hide();
$mbWrapper.show();
$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},
/*
moves the boxes from the top to the center of the page,
and shows the respective content item
*/
openItem = function(pos, speed, easing) {
return $.Deferred(
function(dfd) {
$mbPattern.children().each(function(i) {
var $el = $(this),
param = {
width : '100px',
height : '100px',
top : 154 + 100 * Math.floor(i/4),
left : 200 + 100 * (i%4),
opacity : 1
};

if (!$.browser.msie)
param.rotate = '0deg';

$el.animate(param, speed, easing, dfd.resolve);
});
}
).promise();
};

return {
init : init
};

})();

/*
call the init method of Menu
*/
Menu.init();
});
</script>

body{
background:#000;
color:#fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
color:#fff;
text-decoration:none;
}
img.mb_bgimage{
position:fixed;
left:0px;
top:0px;
width:100%;
opacity:0.8;
z-index:1;
}
.mb_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(/images/pattern.png) repeat top left;
z-index:2;
}
.mb_pattern div{
position:absolute;
width:50px;
height:50px;
background:#000;
z-index:10;
}
.mb_heading h1{
position:absolute;
top:10px;
left:10px;
font-size:86px;
color:#000;
text-shadow:0px 0px 1px #fff;
font-family:"Astloch", Arial, sans-serif;
z-index:4;
}
.mb_menu{
position:absolute;
top:154px;
left:0px;
z-index:11;
}
.mb_menu a{
background-color:#000;
margin-bottom:2px;
opacity:0.9;
display:block;
width:98px;
height:98px;
color:#fff;
line-height:98px;
text-align:center;
text-transform:uppercase;
outline:none;
-webkit-transition: all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
color:#000;
background-color:#fff;
}
.mb_content_wrapper{
background:transparent url(/images/bg_menu.png) repeat top left;
width:400px;
height:400px;
position:absolute;
top:154px;
left:200px;
z-index:4;
display:none;
}
span.mb_close{
position:absolute;
top:10px;
right:10px;
width:11px;
height:12px;
cursor:pointer;
background:transparent url(/images/close.png) no-repeat top left;
opacity:0.8;
}
span.mb_close:hover{
opacity:1.0;
}
.mb_content{
padding:30px;
display:none;
}
.mb_content h2{
font-family:"Astloch";
text-shadow:0px 0px 1px #fff;
font-size:42px;
background:transparent url(/images/line.png) repeat-x bottom left;
padding:0px 0px 5px 0px;
margin-bottom:10px;
}
.mb_content_inner{
line-height:24px;
height:268px;
outline: none;
}
.mb_content_inner p{
padding:5px 0px;
}
ul.mb_imagelist li{
float:left;
margin:2px;
cursor:pointer;
}
ul.mb_imagelist li img{
display:block;
opacity:0.3;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
opacity:1.0;
}
.mb_content form label{
float:left;
width:100px;
text-align:right;
margin-right:10px;
}
.mb_content form div{
padding:5px 0px;
}
.mb_content form input,
.mb_content form textarea{
border:none;
background:#fff;
width:200px;
font-family:Arial;
color:#555;
padding:4px;
}
.mb_content form textarea{
height:140px;
}
button{
background:#ddd;
border:none;
color:#000;
padding:3px 10px;
font-family: 'PT Sans Narrow', Arial, sans-serif;
cursor:pointer;
float:right;
margin-right:22px;
}
button:hover{
background:#fff;
}
.mb_footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
text-transform:uppercase;
z-index:4;
}
.mb_footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.mb_footer a:hover{
color:#fff;
}
.mb_footer a span{
font-weight:bold;
}
.mb_footer a.mb_left{
float:left;
}

<div id="mb_background" class="mb_background">
<img class="mb_bgimage" src="Ссылка на большое изображение, которое будет фоном по-умолчанию" alt="Background" />
<div class="mb_overlay"></div>
<div class="mb_loading"></div>
</div>
<div id="mb_pattern" class="mb_pattern"></div>
<div class="mb_heading">
<h1>Lack of Color</h1>
</div>
<div id="mb_menu" class="mb_menu"> <a href="#" data-speed="1000" data-easing="easeOutBack">About</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Work</a>
<a href="#" data-speed="1000" data-easing="easeOutBack">Media</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Contact</a>
</div>
<div id="mb_content_wrapper" class="mb_content_wrapper"> <span class="mb_close"></span>
<div class="mb_content">
<h2>About</h2>
<div class="mb_content_inner">

Бла бла бла</p>

Бла бла бла</p>

Бла бла бла</p>
</div>
</div>
<div class="mb_content">
<h2>Work</h2>
<div class="mb_content_inner">

Тута внизу есть несколько фоток</p>
<ul id="mb_imagelist" class="mb_imagelist">
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
<li>
<img src="Ссылка на маленькое изображение 100х100" alt="image1" data-bgimg="Ссылка на большое изображение для заднего фона" />
</li>
</ul>

Бла бла бла</p>

Бла бла бла</p>
</div>
</div>
<div class="mb_content">
<h2>Media</h2>
<div class="mb_content_inner">

Бла бла бла</p>

Бла бла бла</p>

Бла бла бла</p>
</div>
</div>
<div class="mb_content">
<h2>Contact</h2>
<div class="mb_content_inner">
Здесь можно вставить форму обратной связи
</div>
</div>
</div>