Перейти к содержимому


Меню Которое Раскладывается


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Alex11

Alex11

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

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 14 Июль 2014 - 23:32

Здравствуйте, у меня такой вопрос , хотел сделать так что бы меню раскладывалось а тоесть каталог с права  а не как сейчас нажимаешь и он загружает страницу, и открывается подкатегории и так далее, а хочется что бы нажимаешь и подкатегории раскладываются и если в них есть еще подкатегории тоже при нажатии раскладвались и так же опять сложить можно было, по примеру вот этого сайта http://www.fabfable....-game-of-trones
Не знаю слоэно ли это, не смог сформульровать тему и найти пододное на форуме.

#2 ipodushkin

ipodushkin

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 496 сообщений
  • ГородМосква

Отправлено 14 Июль 2014 - 23:46

http://forum.storela...еста/#entry2083

#3 Alex11

Alex11

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

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 15 Июль 2014 - 14:34

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

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 864 сообщений

Отправлено 16 Июль 2014 - 01:42

не дублируйте пожалуйста темы, вам отписались в другой теме.
Кстати по данной теме выше лучше реализовать, в шаблоне HTML вместо меню:
<ul class="pad-box cont620" id="mainmenu">
		  {% FOR menu %}
			{% FOR header %}
			  {% FOR links %}
				<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			  {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
		</ul>
вставляете структуру из инструкции.
И далее остается прописать стили в файле css

#5 Alex11

Alex11

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

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 16 Июль 2014 - 18:36

Извините, возможно я не совсем так сформулировал свой вопрос, мне нудно мое меню "каталог товаров" сделать так чтоб подкатегории в нем раздвигались по примеру это сайта, сбоку плюсик жмешь и все раскрывается, вот мое где надо сделать 32343.PNG , по примеру этого сайта http://www.fabfable....-game-of-trones

Или как даже в админке storeland  1111.PNG


Шаблон сияние, не как не пойму как это делать, в тех темах что есть на форуме не смог разобраться..

#6 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 443 сообщений

Отправлено 16 Июль 2014 - 19:00

Просмотр сообщенияAlex11 (16 Июль 2014 - 18:36) писал:

Извините, возможно я не совсем так сформулировал свой вопрос, мне нудно мое меню "каталог товаров" сделать так чтоб подкатегории в нем раздвигались по примеру это сайта, сбоку плюсик жмешь и все раскрывается, вот мое где надо сделать Прикрепленный файл 32343.PNG , по примеру этого сайта http://www.fabfable....-game-of-trones

Или как даже в админке storeland  Прикрепленный файл 1111.PNG


Шаблон сияние, не как не пойму как это делать, в тех темах что есть на форуме не смог разобраться..

Вам прислали верную инструкцию. Для начала сделайте бэкап. Далее к шаблоне HTML найдите код:
<ul class="pad-box cont620" id="mainmenu">
				 {% FOR menu %}
					 {% FOR header %}
						 {% FOR links %}
							 <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						 {% ENDFOR %}
					 {% ENDFOR %}
				 {% ENDFOR %}
			 </ul>

и замените на:
<!-- Каталог товаров -->
{%IFNOT catalog_full_empty%}
	 {%FOR catalog_full%}
		 {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
		 <li class="
			 level{catalog_full.LEVEL}
			 nav-{catalog_full.index}
			 {% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
			 {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
		 ">
			 <a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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 %}
	 {%ENDFOR%}
{%ENDIF%}
<!-- /Каталог товаров -->

В шаблон main.js в самый низ

добавляем:
$(document).ready(function(){
// Действие при наведении на меню категорий, для возможности отображения вложенного подменю
$('#nav li').hover(
	 function () {
		 $(this).addClass('over');
	 },
	 function () {
		 $(this).removeClass('over');
	 }
);
});

Далее в main.css добавляем:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}
/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a { color:#FFF !important; background:#333333; }
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */


#7 Alex11

Alex11

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

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 17 Июль 2014 - 01:58

Почему то не получилось, вроде делал все правильно, меню почему то попало в верх, все сбилось но оно раздвигалось но криво, и я повторюсь мне нужно что бы это меню было с правого боку где и сейчас а не сверху, а то малоли вдруг код не тот))
Что можно сделать еще?

на фото как все поехало, сайт восстановил.

Прикрепленные изображения

  • 78989.PNG


#8 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 17 Июль 2014 - 05:11

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

<ul class="pad-box cont620" id="mainmenu">
								 {% FOR menu %}
										 {% FOR header %}
												 {% FOR links %}
														 <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
												 {% ENDFOR %}
										 {% ENDFOR %}
								 {% ENDFOR %}
						 </ul>

заменяйте ваш код каталога

<ul>
				 {%IFNOT catalog_empty %}
					 {% FOR catalog %}
					 {% IFNOT catalog.HIDE %}
						 <li class="cat-item">
						 <a href="{catalog.URL}"
							 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						 >{catalog.NAME}</a>
						 </li>
					 {% ENDIF %}
					 {% ENDFOR %}
				 {% ENDIF %}
				 </ul><br />

Если вас все же не устроит данная реализация, то по каталогу имеется следующая тема форума http://forum.storela...-без-обновлени/




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных