Сообщений в теме: 20

[Imlies]

Подскажите пожалуйста, как сделать, чтобы при нажатии на категорию (из списка в левой панели)разворачивался список подкатегорий, а при повторном нажатии - сворачивался. Сейчас, чтоб убрать список открывшихся подкатегорий, приходится нажимать на кнопку каталог товаров или любую другую.

[Vaccina]

Данный вопрос обсуждался в следующих темах форума

http://forum.storela...ndpost__p__2796

http://forum.storela...dpost__p__15641

http://forum.storela...dpost__p__10375

[Imlies]

Спасибо! Буду изучать)

[Imlies]

Ничего не получилось
Делал все, как в теме http://forum.storela...ndpost__p__2796
1) заказчал плагин
2) Вставил загрузку плагина в шаблоне "html". Получилось так

<!-- Скрипты которые не нужно менять, грузятся из папки общих файлов -->
  <!-- Это собранные в один файл скрипты из файлов:
	{FORALL_JS_PATH}jquery-1.4.2.min.js
	{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js
	{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js
	{FORALL_JS_PATH}jquery.validate.min.js
	{FORALL_JS_PATH}jquery.capslock.min.js
	{FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js
  -->
  <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>

3)В том же шаблоне "html" вместо старого массива категорий выдал полный список категорий. Было:

<!-- Каталог сайта -->
	<div class="block">
	  <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
	  <div class="blockmain navigation fnt12n">
		<ul>
		{%IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>
	  </div>
	  <div class="blockbottom"></div>
	</div>
	<!-- END Каталог сайта -->

стало

<!-- Каталог сайта -->
	<div class="block">
	  <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
	  <div class="blockmain navigation fnt12n">
		<ul>
		{%IFNOT catalog_full_empty %}
			  {% FOR catalog_full %}
				{% IFNOT catalog_full.HIDE %}
				  {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
					 <li>
					   <a href="{catalog_full.URL}"
						  {% IF catalog_full.CURRENT %}
							class="contentTbodycatalog_fullCurent"
						  {% ELSEIF catalog_full.CURRENT_PARENT %}
							class="contentTbodycatalog_fullCurentBranch"
						  {% ENDIF %}
						  {% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
					   >
						{catalog_full.NAME}

						<!-- Отображение количества товаров в категории -->
						{% IF catalog_full.GOODS_COUNT>0 %}
						 ({catalog_full.GOODS_COUNT})
						{% ENDIF %}
					  </a>
					{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
				  {% IF catalog_full.LAST %}
					{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
				  {% ENDIF %}
				{% ENDIF %}
			  {% ENDFOR %}
			{% ENDIF %}
		</ul>
	  </div>
	  <div class="blockbottom"></div>
	</div>
	<!-- END Каталог сайта -->

4) добавил стили в конец файла "main.csstemplate":

#myTree .menuTree:before {
  content: "[+] ";
}
#myTree .expanded:before {
  content: "[-] ";
}
#myTree .collapsed {
  display: none;
}

5)В файле main.js дописал код

$(document).ready(function() {
  $('#myTree').menuTree({
	animation: true,
	handler: 'slideToggle',
	anchor: 'a[rel="withchild"]',
	trace: false
  });
});

В итоге ничего не получилось (только рядом с названием категории стоит цифра и слева плюсик. Но ничего не разворачивается)

[Vaccina]

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

[Imlies]

Вот адрес http://gameconsole.storeland.ru/

[Vaccina]

Попробуйте в файле стилей найти

#left .block .navigation ul li, #right .block .navigation ul li {
	background: url("/web/upload/assets/images/139/138028/block-main-nav-bg.jpg") no-repeat scroll 0 0 transparent;
	border-bottom: 1px solid #E2E2E2;
	border-top: 1px solid #FFFFFF;
	height: 33px;
	overflow: hidden;
	width: 223px;
}

и заменить на

#left .block .navigation ul li, #right .block .navigation ul li {
	background: url("/web/upload/assets/images/139/138028/block-main-nav-bg.jpg") no-repeat scroll 0 0 transparent;
	border-bottom: 1px solid #E2E2E2;
	border-top: 1px solid #FFFFFF;
	width: 223px;
}

[Imlies]

Спасибо большое! Вроде все работает)

[Imlies]

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

[Vaccina]

Изменить основной цвет можно в классе

#left .block .navigation ul li a, #right .block .navigation ul li a {
	color: #4C4C4C;
	display: block;
	line-height: 24px;
	overflow: hidden;
	padding: 4px 5px 14px 25px;
}

а задать цвет для корневых категорий можно вставив в файл стилей

a.menuTree {
	color: #4C4C4C;
}

и изменить цвет в color на необходимый цвет.

[Imlies]

Не получается. Вставил в конец mainCss

a.menuTree {
	color: #4C4C4C;
}

Указал нужный цвет, ничего не изменилось. Зато, когда поменял цвет основных категорий поменялся цвет и выплывающих. А хотелось бы, чтобы цвет был разный

[Vaccina]

Задать цвет для корневых категорий можно через класс

.blockmain.navigation a {
  color: #000;
}

а для подкатегорий через класс

.blockmain.navigation .incat a {
  color: #ссс;
}

Данные классы вам необходимо добавить в конец файла стилей

Класс

a.menuTree {
	color: #4C4C4C;
}

используется для выпадающего меню. У вас на сайте обычное меню установлено.

[Imlies]

Прошу прощения, что не упомянул. Сайт поменялся. Вот новый http://supergm.ru/ пробовал и так и сяк. не работает код

[Vaccina]

Вам тогда все же необходим класс menuTree

Получиться для задания цвета вам необходимо в файл стилей добавить

#myTree a {
  color: #ccc;
}

a.menuTree {
  color: #000 !important;
}

a.menuTree для корневых категорий, #myTree a для всех остальных

[Imlies]

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

[Vaccina]

Добавьте в файл стилей main.css следующий класс

.menuTree.expanded {
  font-weight: bold;
}

[Imlies]

Это для основных категорий. А как тоже самое сделать для подкатегорий?

[Vaccina]

Вам необходимо использовать класс

.contentTbodycatalog_fullCurent, .menuTree.expanded {
  font-weight: bold;
}

[Imlies]

К сожалению, не работает. Основная категория так и выделяется, а подкатегория нет

[Vaccina]

По всей вероятности идет переопределение стилей попробуйте использовать

.contentTbodycatalog_fullCurent, .menuTree.expanded {
  font-weight: bold !important;
}