Форум

Romk_rd · #1 (**permalink**) 25.12.2013, 17:55

Привет всем. Помогите доделать менюшку сайта, ибо у меня идеи кончились. В общем ситуация следующая: Есть 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.
ПОМОГИТЕ РЕАЛИЗОВАТЬ ЭТУ ЗАТЕЮ. Если я в принципе с самого начала пошел не в том направлении - натолкните на другой способ реализации.

рони · #2 (**permalink**) 25.12.2013, 18:04

Romk_rd,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 25.12.2013, 18:30

Romk_rd,
а выбор с помощью меню как -- если по кругу на клик

Romk_rd · #4 (**permalink**) 25.12.2013, 18:38

рони,
Поясните вопрос. Имеете в виду как будет реагировать(меняться) контент в зависимости от нажатой кнопки ?

рони · #5 (**permalink**) 25.12.2013, 18:44

Romk_rd,
да

Romk_rd · #6 (**permalink**) 25.12.2013, 19:07

рони,
ну вообще пока не особо на этот момент заморачиваюсь, привык решать проблемы по пере их поступления ) Ну а так просто поррассуждав, сразу приходит в голову такой вариант - внутрь каджого блока будет вставляться картинка. Картинке будет назначаться определенный уникальный идентификатор. И если пользователь кликает на определенном блоке - скрипт определяет по блоку с какой темматикой (внутри) кликнули. И срабатывает условие что скрыть имеющийся контент В БЛОКЕ КОНТЕНТА, и отобразить там новый контент, который соответствует нажатой кнопке.
Тоесть описывая кратко - контент будет меняться с помощью скрипта, методами fadeIn and fadeOut .

рони · #7 (**permalink**) 25.12.2013, 19:20

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>

Romk_rd · #8 (**permalink**) 25.12.2013, 20:39

рони,
о как вы мне этим настроение подняли )
Рони, будьте добры, внесите некоторые изменения в работу скрипта - если пользователь кликает на правых двух элементах, то вся эта конструкция проворачивается ПО ЧАСОВОЙ стрелке. Ибо долго ждать приходится четвертый или пятый элемент займет третью позицию. А остальное все прямо как и надо.

рони · #9 (**permalink**) 25.12.2013, 21:05

Romk_rd,
ваши варианты хочется видеть)))

рони · #10 (**permalink**) 25.12.2013, 23:09

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>

Форум

Справочник

Discord чат

Курсы javascript