Jump to content

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


Recommended Posts

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

<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'; } }
Link to post
Share on other sites

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

Link to post
Share on other sites

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

<!-- Каталог -->		<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. Уберите везде \.
Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 month later...

Сделал вариант с + который предложил 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 ошибки по кол-ву категорий.
Кто-нибудь сталкивался? Как решить?

Link to post
Share on other sites
  • 3 weeks later...

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

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 3 months later...
  • 2 months later...

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

Link to post
Share on other sites

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

Link to post
Share on other sites

так где оно по полочкам разложено? вначале поста? я и так это имею + опять же голову надо ломать почему при повторном клике подменю не сворачивается... я имел ввиду решение ну допустим как в 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>


и оформлением "при наведении один цвет, при нажатии другой и плавном выводе подменю"
но вот что-то с подкатегориями подкатегорий никак не клеется))) если б гуру ещё каждую строку кода комментили, чтобы в голове что-то откладывалось, было бы чудненько)))
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...