Перейти к содержанию
Официальный форум поддержки Simpla

Раскрывающийся список для меню категорий


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

Этот код туда где хотите вывести категории:

<div id="left">
{function name=categories_tree}
{if $categories}
<ul>
{foreach $categories as $c}
{if $c->visible}
<div onmouseover="sub_menu({$c->id}, 0);" onmouseout="sub_menu({$c->id}, 1);">
<li {if $category->id == $c->id}class="selected"{/if}>
<a href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
</li>
{if in_array($category->id, $c->children)}
<div>
{categories_tree categories=$c->subcategories}
</div>
{else}
<div style="display:none;" id="submenu{$c->id}" onmouseover="sub_menu({$c->id}, 0);" onmouseout="sub_menu({$c->id}, 1);">
{categories_tree categories=$c->subcategories}
</div>
{/if}
</div>
{/if}
{/foreach}
</ul>
{/if}
{/function}
{categories_tree categories=$categories}
</div>


Сам скрипт:

function sub_menu(id,hide) { if(hide){ document.getElementById('submenu'+id).style.display='none'; }else{ document.getElementById('submenu'+id).style.display='block'; } }
Ссылка на сообщение
Поделиться на другие сайты

Видишь, кто-то даже бесплатно делает :) А еще его хорошо бы отблагодарить за помощь ;)

Ссылка на сообщение
Поделиться на другие сайты

А этот код раскрывает подкатегории по нажатию на +, намного удобнее предыдущего варианта=)

<!-- Каталог -->		<script language="javascript">		{literal}		function sub_menu(id,hide)		{			var ele = document.getElementById('submenu'+id);			var text = document.getElementById('subtext'+id);			if(hide, ele.style.display == "block"){				document.getElementById('submenu'+id).style.display='none';				text.innerHTML = "+";			}else{				document.getElementById('submenu'+id).style.display='block';				text.innerHTML = "-";			}		}		{/literal}		</script>		{function name=categories_tree}		{if $categories}		<ul>		{foreach $categories as $c}			{if $c->visible}			<div>			<li>				<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>				{if $c->subcategories}					<a id="subtext{$c->id}" href="javascript:sub_menu({$c->id}, 0)">+</a></li>				{/if}				{if in_array($category->id, $c->children)}					<div>					{categories_tree categories=$c->subcategories}					</div>				{else}					<div style="display:none;" id="submenu{$c->id}">					{categories_tree categories=$c->subcategories}					</div>				{/if}			</li>			</div>			{/if}		{/foreach}		</ul>		{/if}		{/function}		{categories_tree categories=$categories}		<!-- Каталог End -->


P.S. Уберите везде \.
Ссылка на сообщение
Поделиться на другие сайты

Ну сколько людей столько и мнений, у каждого своя фантазия=)
P.S. В предложенном тобою варианте визард минус то, что при клике на категорию мы в нее не попадаем а раскрываем список, также не видно отличия кактегории с подкатегориями и без них, нет стилизации вовсе.

Ссылка на сообщение
Поделиться на другие сайты

все верно, именно такое пожелание у заказчика и было))) там минусов нет, одни плюсы, просто их надо еще осознать)))

***также не видно отличия категории с подкатегориями и без них

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

А стилизация это вообще спорный момент. если предполагать стилизацию – элемент как неотъемлемая часть страницы, гармонирующий с остальными элементами, то что конкретно мне нужно подразумевать под фразой – “ нет стилизации вовсе”?

***Ну сколько людей столько и мнений

это да, но перед тем как нести свое мнение в массы его желательно четко сформулировать и обосновать иначе в нем нет смысла.

Ссылка на сообщение
Поделиться на другие сайты

"Побутова техніка" имеет подкатегории и раскрывается при клике
"Програмне забезпечення " не имеет подкатегорий и визульно от "Побутова техніка" не отличается, вот я про это и говорю. Стоило для категорий у которых есть дочерние категории в стилях прописать фоновую картинку со стрелочкой чтобы покупателям было понятно что в категории "Побутова техніка" есть дочерние категории. Но это все лишь вопрос дизайна не более.

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

Сделал вариант с + который предложил Noxter
Не пойму почему валидатор выдает ошибки:

Line 1029, Column 18: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
Line 1029, Column 18: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<div>
Contexts in which element div may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li elements.
Line 1054, Column 12: No li element in scope but a li end tag seen.
</li>
?
Line 1056, Column 16: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<div>
Contexts in which element div may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li elements.
Line 1081, Column 12: No li element in scope but a li end tag seen.

Всего 33 ошибки по кол-ву категорий.
Кто-нибудь сталкивался? Как решить?

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

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

Ссылка на сообщение
Поделиться на другие сайты

Noxter, ваш вариант меню мне понравился, только вот вопрос? Перестает работать css. У меня в css для меню прописаны разные размеры шрифта для категорий, подкатегорий и т.д. Как привязать css?

Ссылка на сообщение
Поделиться на другие сайты
  • 3 месяца спустя...
  • 2 месяца спустя...

Привет simplaведы попросили сделать интернет-магазин, очень понравился движок, два дня пытался сделать вертикальное аккордеон меню с подкатегориями и подкатегориями подкатегорий, ничего не понимаю в PHP и JS, вопрос к гуру, это возможно сделать, подобное реализовано, или придется ещё месяц копаться?

Ссылка на сообщение
Поделиться на другие сайты

Это сделать возможно... Сколько придется возиться - зависит только от вас. Все можно сделать, не трогая ПХП, на Смарти.

Ссылка на сообщение
Поделиться на другие сайты

так где оно по полочкам разложено? вначале поста? я и так это имею + опять же голову надо ломать почему при повторном клике подменю не сворачивается... я имел ввиду решение ну допустим как в dle с подобным скриптом

<script type="text/javascript">$.fn.UlMenu=function(){	$.each(this,function(){	$("li.submenu",this).hide();		$("li:has(.sublnk)",this).click(function(){			$(this).toggleClass("selected").next("li.submenu").slideToggle(500).css("display",function(){					if($(this).css("display")=="list-item")				return "block";			});		});	});return this;}$(function(){	$("#slidemenu").UlMenu();});</script>


и оформлением "при наведении один цвет, при нажатии другой и плавном выводе подменю"
но вот что-то с подкатегориями подкатегорий никак не клеется))) если б гуру ещё каждую строку кода комментили, чтобы в голове что-то откладывалось, было бы чудненько)))
Ссылка на сообщение
Поделиться на другие сайты

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

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...