Сворачивающееся меню

B@RT · 11 июля 2007

Интересует мод/хак для меню, чтобы можно было получить сворачивающееся меню. Пример _http://busyteacher.org

Тоесть, если нажать на "+", то категория разворачивается и можно увидеть подкатегории.. Преимущество в том, что не используется java и нет нагрузки на базу... собственно это больше критерий.

Можетъ кто выложит или даст ссылку, откуда скачать подобный мод.

Заранее благодарен.

lifestar · 11 июля 2007

Java не используется, но java script как раз

<script language=Javascript type=text/javascript>

var prefixCategory="cat";

var prefixImgCat="imgCat";

function ShowHideCategory(index) {

   var folderDIV=document.getElementById(prefixCategory+index);

   var imgObject=document.getElementById(prefixImgCat+index);

   if (folderDIV==null || imgObject==null) return false;

   if (imgObject.src.indexOf("folder_minus.gif")==-1) {

	   imgObject.src="/images/folder_minus.gif";

	   folderDIV.style.display="block";

   } else {

	   imgObject.src="/images/folder_plus.gif";

	   folderDIV.style.display="none";

   }

   return true;

}

function goToCategory(route) {

   var listCategory=route.split(",");

   for (var i=0;i<listCategory.length;i++)

	   ShowHideCategory(listCategory[i]);

   return true;

}

</SCRIPT>[/html]

Изменено 11 июля 2007 пользователем lifestar

B@RT · 11 июля 2007

хорошо, как можно еще реализовать подобное меню, только с минимальной нагрузку на базу?

и по ходу дела, разбирая выше приведенный пример столкнулся с проблемой:

я использую в меню, у каждого пункта фон кнопки (и в стилях dysplay:block). Из-за этого кнопка "свернуть/развернуть" переезжает выше кнопки с категорией. Если в стилях прибить фон, то все норм. Так же изменения dysplay: inline в FireFox'е приводит к глюку - фон просто обтягивает надпись...

Внимание вопрос: как реализовать все это дело + фон?

lifestar · 11 июля 2007

а зачем вам плюсик загонять в фон? Выводите обычным <img src...>

B@RT · 12 июля 2007

дык, неправильно поняли....

мне плюсик загонять в фон не надо, плюсик и так стоит отдальным изображением. Сейчас попытаюсь обьяснить еще раз.

Если пункт меню использует картинку как фон, то этот самый плюсик появляется не с лева, а вверху пунтка меню. Это обусловленно тем, что в стилях меню стоит опция display:block.

block -	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

Если заменить block на inline, то плюсик появляется там, где надо, только происходит глюк в фаерфоксе (причем везде): фон за пунктом меню становиться не таким размером, как я задавал, а просто обтягивает надпись...

Вот меня и интересует, есть ли еще варинт решения.....?

lifestar · 12 июля 2007

вы мне лучше код напишите - понятнее будет

B@RT · 12 июля 2007

а зачем вам плюсик загонять в фон? Выводите обычным <img src...>

Это стиль менюхи:

a.mainlevel:link, a.mainlevel:visited {

	display: block;

	font-size: 10px;

	font-weight: bold;

	color: #FFFFFF;

	font-family: Tahoma, Helvetica, sans-serif;

	text-transform: uppercase;

	text-align: left;

	height: 23px;

	line-height: 23px;

	width: 162px;

	text-decoration: none;

	margin-top: 1px;

	margin-bottom: 1px;

	text-indent: 10px;

	background-image: url(../images/mainlevel_up.jpg);

	background-repeat: no-repeat;

	background-position: left;

}


a.mainlevel:hover {

	background-image: url(../images/mainlevel_over.jpg);

}

a.mainlevel#active_menu {

	background-image: url(../images/mainlevel_sub.jpg);

	color: #FFFFFF;

}

a.mainlevel#active_menu:hover {

	background-image: url(../images/mainlevel_sub.jpg);

	color: #FFFFFF;

}

Вот собственно сам код, который выводит менюху:

<script language=Javascript type=text/javascript>

var prefixCategory="cat";

var prefixImgCat="imgCat";

function ShowHideCategory(index) {

var folderDIV=document.getElementById(prefixCategory+index);

var imgObject=document.getElementById(prefixImgCat+index);

if (folderDIV==null || imgObject==null) return false;

if (imgObject.src.indexOf("folder_minus.gif")==-1) {

imgObject.src="/images/folder_minus.gif";

folderDIV.style.display="block";

} else {

imgObject.src="/images/folder_plus.gif";

folderDIV.style.display="none";

}

return true;

}

function goToCategory(route) {

var listCategory=route.split(",");

for (var i=0;i<listCategory.length;i++)

ShowHideCategory(listCategory[i]);

return true;

}

</SCRIPT>

Вот что получаю:

ссылка на депозит: http://depositfiles.com/files/1201419

Вот эта зеленая кнопка должна быть слевой стороны, а не сверху....

lifestar · 12 июля 2007

вы не так мне показываете...

качать я ничего не буду.

Как надо:

1. суть проблемы

2. картинка

3. код, отвечающий за этот участок

B@RT · 12 июля 2007

1. 3 раз пишу одно и тоже.....

Проблема в том, что кнопка, отвечающая за сворачивание/разворачивание меню выводится сверху основного пункта меню, а не слева.

2. По ссылке лежит jpg картинка..... я просто незнаю, куда ее можно залить.

3. Весь код я написал в предыдущем своем посте. (1. код css, который выводит фон пункта меню, 2. код в шаблоне, который рисует кнопку свернуть/развернуть).

lifestar · 12 июля 2007

таким образом вы никогда не допрёте...

Во-первых,

код в шаблоне, который рисует кнопку свернуть/развернуть

- неправильно. Не этот код выводит "менюху".

Дайте код и тогда помогу =)

kenpark · 12 июля 2007

де-то я видел такая штука продавалась...пример был как раз на сайте, упомянутом в первом посте...

B@RT · 12 июля 2007

Да, модуль платный, но своих денег не стоит....

Вобщем, я сегодня добрый, вот весь модуль:

engine/modules/menu.php

<?php


=====================================================

 Модуль для DataLife Engine

-----------------------------------------------------

 Made by BDSoft

 ICQ 1-454-461

 E-Mail: BDSoft@mail.ru

 http://www.myws.ru/

-----------------------------------------------------

 Copyright (c) 2007 BDSoft

=====================================================

 Данный код защищен авторскими правами

=====================================================


if(!defined('DATALIFEENGINE'))

{

  die("Hacking attempt!");

}

function Menu($categoryid = 0, $parentid = 0, $nocat = TRUE, $sublevelmarker = '', $returnstring = '',$ret1='')

{

  global $cat_info, $user_group, $member_id;


 $allow_list = explode (',', $user_group[$member_id['user_group']]['allow_cats']);

 $spec_list = explode (',', $user_group[$member_id['user_group']]['cat_add']);

 $root_category = array();



  if($parentid == 0) {$subcat = false;


  } else  {

	$sublevelmarker .= '&nbsp;&nbsp;&nbsp;';


	$fx1.='<div class="tmhelp_th_category" id="cat'.$parentid.'">';$fx2.='</div>';


  }



  if (count($cat_info)) {


  foreach ($cat_info as $cats) {

   if ($cats['parentid'] == $parentid) $root_category[] = $cats['id'];

  }


  if (count($root_category)) {

  $returnstring .= $fx1;

  foreach ($root_category as $id) {

  $i++;

  if ($allow_list[0] == "all" OR in_array($id, $allow_list)) {


	if ($spec_list[0] == "all" OR in_array($id, $spec_list)) $color = "dark"; else $color = "red";




  if($parentid == 0) {

	  $menu_url = $cat_info[$id]['alt_name'];

  } else  {

	$menu_url = $cat_info[$cat_info[$id]['parentid']]['alt_name'].'/'.$cat_info[$id]['alt_name'];

  }


  foreach ($cat_info as $subcat) {

   if ($subcat['parentid'] == $id) $fx5 = true;

  }


  if ($fx5){

	$fx3='<div style="display:inline;"><img id="imgCat'.$id.'"

			onclick="ShowHideCategory('.$id.')" alt=""

			src="{THEME}/images/down.jpg" /> ';

	$fx4=' </div>';

	}

	else

	{

	$fx3='<div>';

	$fx4='</div>';

	}

   $returnstring .= $fx3.'<a href="/'.$menu_url.'" class="mainlevel">'.$cat_info[$id]['name'].'</a>'.$fx4;



  }

  $fx5 = false;

	$returnstring = Menu($categoryid, $id, $nocat, $sublevelmarker, $returnstring);

   }

   $returnstring .= $fx2;

  }

}


  return $returnstring;

}


if ($category_id){

$fx10=$category_id;

   while(1)

   {

	  $fx10 = $cat_info[$fx10]['parentid'];

	  $fx8 .='ShowHideCategory('.$fx10.');';

	  if ($cat_info[$fx10]['parentid'] == 0)break;

   }

$fx9 .= '<script language=javascript

type=text/javascript>ShowHideCategory('.$category_id.');'.$fx8.'</SCRIPT>';}

$menu = Menu().$fx9;

?>

Вставляется в то место, где должно быть меню:


<script language=Javascript type=text/javascript>

var prefixCategory="cat";

var prefixImgCat="imgCat";

function ShowHideCategory(index) {

   var folderDIV=document.getElementById(prefixCategory+index);

   var imgObject=document.getElementById(prefixImgCat+index);

   if (folderDIV==null || imgObject==null) return false;

   if (imgObject.src.indexOf("down.jpg")==-1) {

	   imgObject.src="/images/down.jpg";

	   folderDIV.style.display="block";

   } else {

	   imgObject.src="/images/up.jpg";

	   folderDIV.style.display="none";

   }

   return true;

}

function goToCategory(route) {

   var listCategory=route.split(",");

   for (var i=0;i<listCategory.length;i++)

	   ShowHideCategory(listCategory[i]);

   return true;

}

</SCRIPT>

<DIV id=tmhelp_th_navigationLeftMenu>{menu}</DIV>			

<script language=javascript 

type=text/javascript>goToCategory("");</SCRIPT>

</DIV>

lifestar · 12 июля 2007

Попробуйте так:

это

	$fx3='<div style="display:inline;"><img id="imgCat'.$id.'"

			onclick="ShowHideCategory('.$id.')" alt=""

			src="{THEME}/images/down.jpg" /> ';

замените на вот что

	$fx3='<div style="display:block;"><img id="imgCat'.$id.'"

			onclick="ShowHideCategory('.$id.')" alt=""

			src="{THEME}/images/down.jpg" align="left" /> ';

gva · 12 июля 2007

пойдет такой вариант меню???

B@RT · 12 июля 2007

я так понимаю, это использует активно базу? если да, то в топку....

gva · 12 июля 2007

само дерево практически не использует. при желании можно еще и кэшировать его.

по нагрузке можно сделать не тяжелее, чем модуль динамического меню, который уже есть под дле

lifestar · 12 июля 2007

я так понимаю, это использует активно базу? если да, то в топку....

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

Gorets, отличное меню - респект!

B@RT · 13 июля 2007

Gorets,

А где можно скачать, попробывать этот модуль? :unsure:

lifestar,

Спасибо, помогло.... только теперь картинка кнопки "свернуть/развернуть" рисуется поверх пункта меню (накладывается)....

Изменено 13 июля 2007 пользователем B@RT

lifestar · 13 июля 2007

B@RT, слушай покаж картинку то - так на словах плохо понятно.

B@RT · 13 июля 2007

Это, когда выше пунтка меню:

А вот когда наложение:

Aktarsis · 18 июля 2007

Хм,уважаемые,а что может не работать в коде,предложенным B@RT'ом вроде все сделал,но на сайте выводится только {menu}

B@RT · 19 июля 2007

Хм,уважаемые,а что может не работать в коде,предложенным B@RT'ом вроде все сделал,но на сайте выводится только {menu}

ну, для начала ты должен проинициализоровать модуль, причем в нужно месте

Grek · 2 августа 2007

Хм,уважаемые,а что может не работать в коде,предложенным B@RT'ом вроде все сделал,но на сайте выводится только {menu}

ну, для начала ты должен проинициализоровать модуль, причем в нужно месте

а где это сделать?

напиши плиз полную инструкциюоч надо!

МВИА · 11 октября 2007

Хм,уважаемые,а что может не работать в коде,предложенным B@RT'ом вроде все сделал,но на сайте выводится только {menu}

ну, для начала ты должен проинициализоровать модуль, причем в нужно месте

а где это сделать?
напиши плиз полную инструкциюоч надо!

Действительно как?

Сворачивающееся меню

Рекомендованные сообщения

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

kenpark 0

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

gva 0

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

gva 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

Aktarsis 0

Ссылка на сообщение

Поделиться на других сайтах

B@RT 0

Ссылка на сообщение

Поделиться на других сайтах

Grek 0

Ссылка на сообщение

Поделиться на других сайтах

МВИА 9

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению