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:bold 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:10px 26px;
cursor:pointer;
margin:0 auto;
}
#buttons div:active{
color:#E0FFFF;
}
#buttons div.active{
color:#FFFFF0;
}
</style>
</head>
<body>
<div id="buttons">
<div id="button1" class="but1" attr="attr1" >
<span> Меню 1 </span>
</div>
<div id="button2" class="but2" attr="attr2" >
<span> Меню 2 </span>
</div>
<div id="button3" class="but3" attr="attr3">
<span> Меню 3 </span>
</div>
<div id="button4" class="but4" attr="attr4">
<span> Меню 4 </span>
</div>
<div id="button5" class="but5" attr="attr5" >
<span> Меню 5 </span>
</div>
</div>
<script>
var pos = [{
'top': '90px',
'left': '410px'
}, {
'top': '70px',
'left': '590px'
}, {
'top': '40px',
'left': '770px'
}, {
'top': '40px',
'left': '50px'
}, {
'top': '70px',
'left': '230px'
}],
buts = $('#buttons div[id^=button]'),
len = buts.length,
n = 0,
i_but = 0,
timer;
buts.each(function (indx, element) {
$(element).animate(pos[indx], 500);
$(element).click(function () {
n = ((len - indx) + i_but) % len;
i_but = indx;
buts.removeClass('active').eq(i_but).addClass('active');
show()
})
});
function show() {
if (!n) return;
n--;
var elem = pos.shift();
pos.push(elem)
buts.each(function (indx, element) {
$(element).animate(pos[indx], 500);
});
timer = window.setTimeout(show, 500)
}
</script>
</body>
</html>