Привет всем. Помогите доделать менюшку сайта, ибо у меня идеи кончились. В общем ситуация следующая: Есть 5 кнопок меню, они расставлены в форме иерархической модели - главная кнопка находится как бы выше всех, во втором ряду другие 2 кнопки и третьем ряду оставшиеся 2 кнопки. Если пользователь кликает по самой левой кнопке - целиком менюшка кнопок должна прокрутиться против часовой стрелки и та кнопка, по которой кликнули (в этом примере это самая крайняя левая) должна стать посередине. Тоесть первая кнопка должна занять место третьей, вторая - четвертой, третяя - пятой, четвертая - первой и пятая второй. А теперь что касается кода:
<html>
<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>
</html>
<script>
$('#buttons div').click(function() {
position = $(this).attr('attr');
if (position=='attr1') {
var i = 3;
$('#buttons div[attr*=attr1]').animate({'top' : '70px', 'left' : '230px'}, 500).animate({'top' : '90px', 'left' : '410px'}, 500 );
$('#buttons div[attr*=attr2]').animate({'top' : '90px', 'left' : '410px'}, 500).animate({'top' : '70px', 'left' : '590px'}, 500);
$('#buttons div[attr*=attr3]').animate({'top' : '70px', 'left' : '590px'}, 500).animate({'top' : '40px', 'left' : '770px'}, 500);
$('#buttons div[attr*=attr4]').animate({'top' : '40px', 'left' : '770px'}, 500).animate({'top' : '40px', 'left' : '50px'}, 500);
$('#buttons div[attr*=attr5]').animate({'top' : '40px', 'left' : '50px'}, 500).animate({'top' : '70px', 'left' : '230px'}, 500);
$('div[attr*=attr]').each(function() {
$(this).attr('attr', 'attr'+i);
i++;
if (i>5) {
i = 1;
}
});
}
Разъяснюсь по некоторым моментам:
1) атрибут attr был назначен просто для того чтобы можно было выполнять действия над объектами
2) Это я привел только кусок скрипта, отвечающего за нажатие по первому элементу. Тоесть на данный момент у меня цель - сделать так чтобы хотя бы при нажатии по первому элементу список кнопок постоянно проворачивался.
3) Раньше в самой первой версии скрипта та часть, которая отвечает за замену атрибутов выглядела так:
$('#buttons div[attr*=attr1]').attr('attr', 'attr3');
$('#buttons div[attr*=attr2]').attr('attr', 'attr4');
$('#buttons div[attr*=attr3]').attr('attr', 'attr5');
$('#buttons div[attr*=attr4]').attr('attr', 'attr1');
$('#buttons div[attr*=attr5]').attr('attr', 'attr2');
однако минус этого способа в том что переназначения йдут по порядку, и сначала 2 элементу назначается 4 атрибут на втором шаге, затем на 4 шаге он переназначается на 1 элемент.
А если использовать $(this) то он не смотрит на то что атрибуты поменялись, и в цикле первый элемент всегда считает за первый, даже после того как у него сменился атрибут attr.
ПОМОГИТЕ РЕАЛИЗОВАТЬ ЭТУ ЗАТЕЮ. Если я в принципе с самого начала пошел не в том направлении - натолкните на другой способ реализации.