Горизонтальный слайдинг. Нужна помощь

EXxX · February 11, 2011

Здравствуйте, уважаемые форумчане.

Сразу проше не бить меня ногами, я уважаю Ваше время, но решить проблему своими силами не могу. Поэтому прошу помощи у тех, кто найдет возможность.

Суть вот в чем - нужно сделать сайт на РНР с принципом навигации и отображения информации как вот тут

Вопрос целесообразности очень прошу не поднимать.

основательно порыл Ваш форум и, как мне показалось, нашел подходящий мне пример скрипта. К сожалению, моих возможностей и знаний не хватило на то, чтобы все сделать как следует.

Пытался разобраться хотя бы в принципе действия и сделал вот это:

<html>
<head>
<title></title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
<style>

#iMenu		  {float: left;
		 width: 515px;
		 border: 1px solid;
} 
#iMenu div.cBtn {float: left;
		 width: 200px;
		 height: 40px;
		 line-height: 53px;
		 text-align: center;
		 cursor: pointer;
		 font-weight: bold;
		 color: black;
		 text-decoration: underline;
		 font-size:14px;
		 border: 1px solid;
} 
#iMenu div.cBtn img {	width: 14px;
			height: 14px; 
			margin: 0px 10px 0px 0px; 
}

#iMenu #iClr	{clear: both} 

/* панель, которая выдвигается */

#iMenu div.cPan {float: left;
		 overflow: hidden;
		 width: 1px;
		 height: 100%} 
#iMenu #iPan1   {margin: 0 10px} 

/* link1 стили для 1-ой раскрывающейся фигни */

 .vneshniy_link1 { width:100px; 
		   height: 50px;
				   margin:0 auto; padding:0px;
			   position: relative;
			   left: 0px;
		   top: 0px;
		   border: 1px solid;
}

/* link2 стили для 2-ой раскрывающейся фигни */

 .vneshniy_link2 { width:100px; 
		   height: 50px;
				   margin:0 auto; padding:0px;
			   position: relative;
			   left: 105px;
		   bottom: 52px;
		   border: 1px solid;
}
<!--[if IE]><style>#iMenu {width: 515px}</style><![endif]-->  <!-- ширина меню если браузер IE -->
 </style>  

	<script src="" type="text/javascript"></script>
<script>
// JavaScript Document
<!-- ФУНКЦИЯ ДЛЯ РАСКРЫТИЯ МЕНЮ -->

var gStatus = new Array (0, 0, 0); //Статус трёх пар "кнопка/панель": 
// 0 - кнопка активна	/ панель полностью свёрнута 
// 1 - кнопка недоступна / панель в процессе разворачивания 
// 2 - кнопка активна	/ панель полностью развёрнута 
// 3 - кнопка недоступна / панель в процессе сворачивания 

var gTimer = null; //состояние таймера 

function fChangeStatus (x) 
{ 
if (gStatus [x] % 2) return;			  //статус нечётный (1 или 3), кнопка недоступна, выходим из функции 
gStatus [x] = (!gStatus [x]) ? 1 : 3;	 //установка нового статуса (1 - разворачиваем или 3 - сворачиваем) 
with (document.getElementById ('iBtn' + x).style) 
{fontWeight = 'normal'; color = 'gray'; textDecoration = 'none'; cursor = 'default'} //делаем кнопку неактивной 
document.getElementById ('iBtn' + x).firstChild.style.visibility = 'hidden';
if (!gTimer) fProcess ();				 //запускаем таймер, если он ещё не включён 
} 

function fProcess () 
{ 
for (var k = j = 0, l = gStatus.length; j < l; j++) //просматриваем статусы всех пар "кнопка-панель" 
   { 
   var st = gStatus [j]; if (st % 2) //если статус нечётный (1 или 3), то сворачиваем/разворачиваем 
	  { 
	  var obj = document.getElementById ('iPan' + j); 
	  var wd = obj.offsetWidth + 2 * ((st == 1) ? 1 : -2); //определяем текущую ширину панели и изменяем её (в плюс или в минус, в зависимости от статуса) 
	  obj.style.width = wd + 'px'; 

	   if (st == 1 && wd == obj.scrollWidth) {gStatus [j] = 2;} //меняем статус на "полностью развёрнута" 
	  if (st == 3 && wd == 1) {gStatus [j] = 0;} //меняем статус на "полностью свёрнута" 
	  if (st != gStatus [j]) {with (document.getElementById ('iBtn' + j).style) 
	  {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной 

	  document.getElementById ('iBtn' + j).firstChild.style.visibility = 'visible'}

	  else k++; //статус не изменился, надо продолжать процесс, меняем флаг 
	  } 
   } 
if (k) gTimer = setTimeout (fProcess, 5); else gTimer = null; //продолжаем процесс или выходим из него 
} 
</script>

</head>

<body>

			   <div id="iMenu"> 

			   <div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)" float="left"><img src="" />Выдвинуть/Задвинуть</div> 

			   <div class="cPan" id="iPan0">

							<div class="vneshniy_link1">
				текст_1
							</div>

							<div class="vneshniy_link2">
				текст_2
							</div>

				  <div id="iClr"></div>

			  </div> <!-- #iPan0 -->

			</div> <!-- #iMenu -->

</body>
</html>

Сейчас важен сам принцип действия, а не внешний вид. Не могу понять, почему первый блок, после открывания, сдвигается вправо пока не откроется второй.

Если не затруднит, помогите советом или примером. Может, я вообще не в том направлении двигаюсь.

Заранее спасибо!

Great Rash · February 11, 2011

Используйте jQuery UI, для ваших нужд подойдет лучше всего.

EXxX · February 11, 2011

Используйте jQuery UI, для ваших нужд подойдет лучше всего.

Спасибо за совет. А смену табов как-то можно сделать анимированную?

Great Rash · February 15, 2011

Внимательно читайте описание к каждой функции. Там все расписано до мелочей, с примерами кода.

Sign In

Горизонтальный слайдинг. Нужна помощь

Question

EXxX

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

EXxX

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information