Выдвижной блок меню

Phoenix88 · January 31, 2011

Товарищи, ничего не понимаю в JS но мне безумно нужно сделать выдвижное меню для сайта типа http://linedmk.com/primers/javascript/vkladki.html

Помогите подстроить под мой сайт, прошу...

Выезжать должно menu2.

index.php:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/nefes_main/css/style.css" type="text/css" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

</head>

<body>

<div id="main">
	 <div id="verx">
		  <div id="logo">
			   <a href="index.php"><img src="templates/nefes/images/logo.gif" width="268" height="115" /></a>
		  </div>
		  <div id="kusok">

			   <div id="autor">
			   <jdoc:include type="modules" name="autor" />
			   </div>

			   <div id="poisk">
			   <jdoc:include type="modules" name="poisk" />
			   </div>

			   <div id="menu1" class="havv">
			   <jdoc:include type="modules" name="menu1" />
			   </div>
		  </div>
		  <div id="data">
		  <jdoc:include type="modules" name="datavr" />
		  </div>
	 </div>
	 <div id="ist"></div>

	 <div id="ni3">

		  <div id="content" class="roundify">


			   <div id="strim" class="roundify">
			   <jdoc:include type="modules" name="content"   style="xhtml"/>
			   <jdoc:include type="component" />
			   </div>

			   <div id="haber" class="roundify">
			   <jdoc:include type="modules" name="haber"   style="xhtml"/>
			   </div>

			   <div id="pogod" class="roundify">
			   <jdoc:include type="modules" name="pogoda"   style="xhtml"/>
			   </div>

		  </div>

		  <div id="datax" class="roundify">
		  <jdoc:include type="modules" name="datax" />
		  </div>
		  <div id="menu2" class="roundify">
<?php
//$jspath = JPATH_ROOT.DS.'components'.DS.'com_community';
//include_once($jspath.DS.'libraries'.DS.'core.php');
//$user =& CFactory::getUser($userid);
//$avatarUrl = $user->getAvatar();
//echo '<img src="'. $avatarUrl .'"/>';  ?>

		  <jdoc:include type="modules" name="menu2" />
		  </div>
					<!--
<div id="menu3">
		  <jdoc:include type="modules" name="menu3" />
		  </div>
-->
	 </div>
</div>

</body>

</html>

rus · February 1, 2011

сколько платите?

Phoenix88 · February 1, 2011

сколько платите?

Да я как то не рассчитывала, что это будет платно. Просто попросила помощи от тех, кто умеет таким заниматься... Тут всё таки не доска объявлений, а форум.. <_<

psywalker · February 1, 2011

Да я как то не рассчитывала, что это будет платно. Просто попросила помощи от тех, кто умеет таким заниматься... Тут всё таки не доска объявлений, а форум..

1) Название раздела ни о чём не говорит?

2) Правила форума читала?

rus · February 1, 2011

помогают только тем, кто хочет чему-то научиться, а делать чужую работу вряд ли кто согласится, вы согласны с такой трактовкой?

Phoenix88 · February 1, 2011

помогают только тем, кто хочет чему-то научиться, а делать чужую работу вряд ли кто согласится, вы согласны с такой трактовкой?

я хочу научиться.. спросила совета.

на адресе, который я прислала примерно написан код и скрипт.

Я ПРОШУ СОВЕТА, что и где поправить, чтобы можно было сделать похожее на мой сайт.

Помогите подстроить под мой сайт, прошу... <<-- моё первое сообщение. Прошу прощения, если написала что-то неверно. Но я не думала, что моя просьба каким то образом указывает на то что я не хочу учиться , а хочу готовое.

psywalker, я создавала тему не в этом форуме.

А почему переместили мою тему в коммерческие предложения?! Без понятия.

А правила причём?? Тут бесплатно никто никому не помагает???

Edited February 1, 2011 by Phoenix88

rus · February 2, 2011

1) лучше дайте ссылку на ваш сайт.

2) вот это: <jdoc:include type="modules" name="menu2" /> мне ни о чем не говорит, я не вижу сорцы кода.

3) исходя из пункта 2) придется лезть к вам на фтп и искать откуда подгружается html код меню.

4) что вам мешает самой по аналогии сделать? вы как я понял привели код, который написали сами? ну раз сами написали такой код, то вам не сложно будет сделать все по аналогии, вам всего лишь нужно:

а) скопировать и вставить скрипт:

<script type="text/javascript">

num_inset_motor=0;
flag_inset_motor=0;
time_pause_motor=1;
delta_y=3;
set_motor=false;
id_settimeout=0;
open_inset_num=0;
next_open_num=0;
height_header=30;//высота заголовка вкладки

function click_header_inset(n_inset)
  {

   if (!set_motor)
	 {
	  next_open_num=0;
	  if (open_inset_num==0)
		{ 
		 num_inset_motor=n_inset;
		 flag_inset_motor=1;
		 set_motor=true;
		 motor_inset();
		}
	   else
		 {
		  if (n_inset!=open_inset_num) next_open_num=n_inset;
		  num_inset_motor=open_inset_num;
		  flag_inset_motor=-1;
		  set_motor=true;
		  motor_inset();

		 }
	 }
	else
	  {
	   clearTimeout(id_settimeout);
	   if (n_inset==num_inset_motor)
		 {
		  flag_inset_motor*=-1;
		  motor_inset();
		 }
		else
		  {
		   next_open_num=n_inset;
		   if (flag_inset_motor>0)
			 {
			  flag_inset_motor=-1;

			 }
		   motor_inset();
		  }
	  }
  }

function motor_inset()
  {
   if (num_inset_motor==0) return;
   if (flag_inset_motor==0) return;
   obj_name="inset_num"+num_inset_motor;
   obj_inset=document.getElementById(obj_name);
   y_inset_motor=obj_inset.offsetTop;

   y_inset_motor+=flag_inset_motor*delta_y;

   if (flag_inset_motor>0)
	 {
	  if (y_inset_motor>0)//вкладка отрыта
		{
		 y_inset_motor=0;
		 set_motor=false;
		 open_inset_num=num_inset_motor;
		}
	 }
	else
	  {
	   if (y_inset_motor<=height_header-obj_inset.offsetHeight)//вкладка закрыта
		 {
		  y_inset_motor=height_header-obj_inset.offsetHeight;
		  set_motor=false;
		  open_inset_num=0;
		  if (next_open_num>0)
			{

			 num_inset_motor=next_open_num;
			 next_open_num=0;
			 flag_inset_motor=1;
			 set_motor=true;

			}
		 }

	  }
   obj_inset.style.top=y_inset_motor+"px";

   if (set_motor)
	{
	 id_settimeout=setTimeout("motor_inset()",time_pause_motor);
	}

  }

</script>

б) кусок html кода:

<div class="block_inset">
<div id="inset_pole1" class="inset_pole">

<div id="inset_num1" class="inset_num" style="top: 0px;">
<div class="inset_kontent">Содержимое вкладки</div>
<div onclick="click_header_inset(1);" id="inset_header1" class="inset_header"><div>Вкладка</div></div>
</div>

<div id="inset_num2" class="inset_num">
<div class="inset_kontent">
Содержимое вкладки
</div>
<div onclick="click_header_inset(2);" id="inset_header2" class="inset_header"><div>Вкладка</div></div>
</div>

<div id="inset_num3" class="inset_num">
<div class="inset_kontent">
Содержимое вкладки</div>
<div onclick="click_header_inset(3);" id="inset_header3" class="inset_header"><div>Вкладка</div></div>
</div>

<!-- тут вставляем HTML-код следующих вкладок (если нужно конечно) -->

</div>
</div>

в) ну и настроить css стили под ваш сайт:

<style type="text/css">

  body { margin:0px; padding:0px; font-family: verdana, sans-serif; font-size:14px; }
  td { font-size:14px; }
  a { text-decoration:none; color:#fff; }
  .menu { background:#7BB9FD; padding:5px; border-bottom:solid 1px #000; 
  border-top:solid 1px #000; }
  .text_site { padding:10px; }
  /* свойства вкладок */
  .block_inset { position:relative; height:30px; }
  .inset_pole { overflow:hidden; /*background:#3FC5B7; */ width:100%; height:300px; 
	position:absolute; left:0px; top:0px; }
  .inset_num { position:absolute; background-image:url("./images/inset.gif"); width:200px; height:150px;
	 top:-120px; }
  .inset_header { position:absolute; bottom:0px; left:0px; width:100%; 
	cursor:pointer; text-align:center; /*background:#00FF40;*/ height:30px; color:#C0C0C0;
	font-weight:bold; }
  .inset_header div { padding:5px; }
  .inset_kontent { padding:10px;  height:120px; /*background:#408080;*/ }

  /* вкладки  */
  #inset_num1 { left:10px; }
  #inset_num2 { left:220px; }
  #inset_num3 { left:430px; }

  </style>

selevit · February 2, 2011

Пиши мне в ICQ (Смотри в профиле) - помогу <_<

Phoenix88 · February 5, 2011

К сожалению, это не я написала скрипт, просто нашла в интернете то, что мне подходит..

Сама подстраивать пробовала, но не особо получилось..

Подскажите, пожалуйста, какая строка отвечает за высоту выдвижного блока?

Phoenix88 · February 9, 2011

Тему можно закрывать. Воспользовалась gk tabs manager. Всем спасибо.

Sign In

Выдвижной блок меню

Recommended Posts

Phoenix88

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Phoenix88

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Phoenix88

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

selevit

Link to comment

Share on other sites

Phoenix88

Link to comment

Share on other sites

Phoenix88

Link to comment

Share on other sites

Обсуждения

Forums

Important Information