Помогите додумать динамическое меню. При выборе кнопок меню их положение меняется.
Привет всем. Помогите доделать менюшку сайта, ибо у меня идеи кончились. В общем ситуация следующая: Есть 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. ПОМОГИТЕ РЕАЛИЗОВАТЬ ЭТУ ЗАТЕЮ. Если я в принципе с самого начала пошел не в том направлении - натолкните на другой способ реализации. |
Romk_rd,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Romk_rd,
а выбор с помощью меню как -- если по кругу на клик |
рони,
Поясните вопрос. Имеете в виду как будет реагировать(меняться) контент в зависимости от нажатой кнопки ? |
Romk_rd,
да |
рони,
ну вообще пока не особо на этот момент заморачиваюсь, привык решать проблемы по пере их поступления ) Ну а так просто поррассуждав, сразу приходит в голову такой вариант - внутрь каджого блока будет вставляться картинка. Картинке будет назначаться определенный уникальный идентификатор. И если пользователь кликает на определенном блоке - скрипт определяет по блоку с какой темматикой (внутри) кликнули. И срабатывает условие что скрыть имеющийся контент В БЛОКЕ КОНТЕНТА, и отобразить там новый контент, который соответствует нажатой кнопке. Тоесть описывая кратко - контент будет меняться с помощью скрипта, методами fadeIn and fadeOut . |
меню по кругу
Romk_rd,
:write:
<!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>
|
рони,
о как вы мне этим настроение подняли ) Рони, будьте добры, внесите некоторые изменения в работу скрипта - если пользователь кликает на правых двух элементах, то вся эта конструкция проворачивается ПО ЧАСОВОЙ стрелке. Ибо долго ждать приходится четвертый или пятый элемент займет третью позицию. А остальное все прямо как и надо. |
Romk_rd,
ваши варианты хочется видеть))) |
Круговое меню
Romk_rd,:write:
<!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>
|
| Часовой пояс GMT +3, время: 04:44. |