Romk_rd,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#buttons div{
position:absolute;
cursor:pointer;
font:cursive 18px "Arial Black",Gadget,sans-serif;
font-style:normal;
color:#ffd324;
background:#2c41cf;
border:0px outset #4a3a00;
text-shadow:0px -1px 8px #0d0d0d;
box-shadow:-2px 0px 12px #2e2300;
-moz-box-shadow:-2px 0px 12px #2e2300;
-webkit-box-shadow:-2px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:80px;
padding:4px 22px;
cursor:pointer;
margin:0 auto;
text-align:center;
}
#buttons div:hover{
color:#FF0;
}
#buttons div.active{
color:#FFFFF0;
}
#content{
position:absolute;
top:170px;
width:300px;
left:300px;
text-align:center;
height:100px;
font:cursive 18px "Arial Black",Gadget,sans-serif;
font-style:normal;
color:#ffd324;
background:#2c41cf;
border:0px outset #4a3a00;
text-shadow:0px -1px 8px #0d0d0d;
box-shadow:-2px 0px 12px #2e2300;
-moz-box-shadow:-2px 0px 12px #2e2300;
-webkit-box-shadow:-2px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
padding:4px 22px;
}
body{
background:#DEB887;
}
</style>
</head>
<body>
<div id="buttons">
<div id="button1" class="active" >
<span> Меню 1 </span>
</div>
<div id="button2" >
<span> Меню 2 </span>
</div>
<div id="button3" >
<span> Меню 3 </span>
</div>
<div id="button4" >
<span> Меню 4 </span>
</div>
<div id="button5" >
<span> Меню 5 </span>
</div>
</div>
<div id="content" >1</div>
<script>
var pos = [{
'top': '90px',
'left': '410px'
}, {
'top': '70px',
'left': '590px'
}, {
'top': '40px',
'left': '770px'
}, {
'top': '40px',
'left': '50px'
}, {
'top': '70px',
'left': '230px'
}],
go = [0,-1,-2,2,1],
buts = $('#buttons div[id^=button]'),
n = 0,
i_but = 0;
buts.each(function (indx, element) {
$(element).animate(pos[indx], 500);
$(element).click(function () {
if (indx == i_but) return;
n = go[indx];
i_but = indx;
buts.removeClass('active');
$(element).addClass('active');
$('#content').stop(true, true).slideUp(500);
show();
})
});
function show() {
if (!n) {
$('#content').html(i_but + 1).stop(true, true).slideDown(300);
return;
}
if (n > 0){
var elem = pos.shift();
pos.push(elem);
elem = go.shift();
go.push(elem);
n--;
}
else {
var elem = pos.pop();
pos.unshift(elem);
elem = go.pop();
go.unshift(elem);
n++
}
buts.each(function (indx, element) {
$(element).animate(pos[indx], 500);
});
window.setTimeout(show, 505)
}
</script>
</body>
</html>