Giddeon, жать на жёлтый прямоугольник потом на синий, слабонервным в код не вглядываться )))
<!DOCTYPE html>
<html>
<head>
<title>Grace</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<style type="text/css">
*{margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:#FDF5E6}
#header{width:100%;height:16%;background:#C9C}
h1{color:#C0C0C0;font-size:xx-large}
ul{margin-left:70%}
li{display:inline-block;margin-left:2%}
#lent{width:70%;height:30%;font-size:0;margin-left:16%;margin-top:15%}
#first,#second,#third,#forth{height:100%;width:25%;display:inline-block}
#first,#hidden1{background:#00F}
#second,#hidden2{background:#FF0}
#third,#hidden3{background:#008000}
#forth,#hidden4{background:#F00}
#hidden1,#hidden2,#hidden3,#hidden4{width:100%;height:79%;margin-top:26.5%;position:absolute}
.selected{
border: #00CED1 5px dashed;
}
</style>
<script>
$(document).ready(function() { var flag = false ;
$('#first').click(function() { if(flag) return;flag = true;
$('#hidden1').show();
setTimeout( function() {
$('#lent').animate({
width: '100%',
height: '5%',
marginTop: '0%',
marginLeft: '0%'
}, 2000);
}, 750);
$('#hidden1').animate({
marginTop: '0%'
}, 1000);
$('#hidden1').addClass('selected');
$('#lent').addClass('compressed');
});
$('#second').click(function() { if(flag) return;flag = true;
if($('#lent').hasClass('compressed')) {}
else {
$('#hidden1').css('margin-left', '100%');
$('#hidden1').css('margin-top', '0%');
$('#hidden2').show();
setTimeout( function() {
$('#lent').animate({
width: '100%',
height: '5%',
marginTop: '0%',
marginLeft: '0%'
}, 2000);
}, 750);
$('#hidden2').animate({
marginTop: '0%'
}, 1000);
$('#hidden2').addClass('selected');
$('#lent').addClass('compressed');
}
});
$('#third').click(function() { if(flag) return;flag = true;
if($('#lent').hasClass('compressed')) {}
else {
$('#hidden3').show();
setTimeout( function() {
$('#lent').animate({
width: '100%',
height: '5%',
marginTop: '0%',
marginLeft: '0%'
}, 2000);
}, 750);
$('#hidden3').animate({
marginTop: '0%'
}, 1000);
$('#hidden3').addClass('selected');
$('#lent').addClass('compressed');
}
});
$('#forth').click(function() { if(flag) return;flag = true;
if($('#lent').hasClass('compressed')) {}
else{
$('#hidden4').show();
setTimeout( function() {
$('#lent').animate({
width: '100%',
height: '5%',
marginTop: '0%',
marginLeft: '0%'
}, 2000);
}, 750);
$('#hidden4').animate({
marginTop: '0%'
}, 1000);
$('#hidden4').addClass('selected');
$('#lent').addClass('compressed');
}
});
});
</script>
<script>
$(document).ready(function () {
$('#first').click(function() {
if($('#lent').hasClass('compressed')) {
if($('#hidden1').hasClass('selected')) {}
else {
$('#hidden1').show();
$('#hidden1').animate({
marginLeft: '0%'
}, 1000);
$('.selected').animate({
marginLeft: '-100%'
}, 1000, function(){
$('.selected').css('margin-left', '100%').removeClass('selected');
$('#hidden1').addClass('selected');
});
}
}
});
});
</script>
</head>
<body>
<div id='header'>
<h1>Grace</h1>
<ul>
<li>Production</li>
<li>Gallery</li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div id='lent'>
<div id='first'><img src='' alt=''></div>
<div id='second'><img src='' alt=''></div>
<div id='third'><img src='' alt=''></div>
<div id='forth'><img src='' alt=''></div>
</div>
<div id='hidden1'></div>
<div id='hidden2'></div>
<div id='hidden3'></div>
<div id='hidden4'></div>
</body>
</html>