Jump to content

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


Recommended Posts

Сорри, "Раз Два" ссылки не заметил))) Ну так мне то это понятно что в HTML страницу запендюрить можно всё что угодно и поисковиками умею пользоваться, вопрос то в следующем, как переменные simpla запихать в это меню, админить магазин будут люди, которые только компьютер включать умеют и соответственно править код не будут, т.е. катекории и подкатегории и подкатегории подкатегорий в аккордеон меню должны попадать исключительно посредствам админпанели)))

Link to post
Share on other sites

подсказываю на примере "Раз" и дефолтного шаблона simpla:
Заливаете файлы по нужным папкам ( в папку design/default/css - файлы "liMenuVert.css" и на выбор один из трёх файлов темы, например "liMenuVertTheme-white.css"; в папку design/default/js/ - "jquery.liMenuVert.js" )
потом, в index.tpl перед

</head> 

пишем

<!--основной файл стилей-->
<link rel="stylesheet" href="design/{$settings->theme|escape}/css/liMenuVert.css">
<!--шаблонный файл стилей-->
<link rel="stylesheet" href="design/{$settings->theme|escape}/css/liMenuVertTheme-white.css">
<!--jquery-->
<!--ну и конечно же сам плагин-->
<script src="design/{$settings->theme|escape}/js/jquery.liMenuVert.js"></script>
<script>
$(function(){
 $('.menu_vert').liMenuVert();
});
</script>


Далее, в том же index.tpl ищем

<!-- Меню каталога -->
		<div id="catalog_menu">
				
		{* Рекурсивная функция вывода дерева категорий *}
		{function name=categories_tree}
		{if $categories}
		<ul>
		{foreach $categories as $c}
			{* Показываем только видимые категории *}
			{if $c->visible}
				<li>
					{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
					<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
					{categories_tree categories=$c->subcategories}
				</li>
			{/if}
		{/foreach}
		</ul>
		{/if}
		{/function}
		{categories_tree categories=$categories}
		</div>
		<!-- Меню каталога (The End)-->


в нём после

{if $categories}

вместо

<ul>

пишем

<ul class="menu_vert">


потом, в вашем файле style.css закоментируем (или удаляем) стили содержащие

#catalog_menu

потом в том же файле ищем

#left {
width: 260px;
float: left;
overflow: hidden;
}

меняем на

#left {	width: 260px;	float: left;	overflow: visible;}

всё.
У меня работает.
Link to post
Share on other sites

Спасибо конечно огромное, этот пост ещё на шаг приблизил меня к аккордеонному меню из примера Два , но:

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

Полезу в jquery.liHarmonica.js , а потом плюну и выкачаю чей нибудь сайт)))
Ещё раз спасибо)))

Link to post
Share on other sites

http://www.jpclan.ru/
стоит твой долбанный аккордеон!

<div id="categories_block_left" class="block">
<h4>Категории</h4>
<div class="block_content">
{assign var="level" value=1}
{function name=categories_tree}
{if $categories}
	<ul ul-level="{$level}" {if $level == 1}class="tree dhtml"{/if}>
	{foreach $categories as $c}
		{if $c->visible}
		<li>
		<a href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
		{categories_tree categories=$c->subcategories level=$level+1}
		</li>
		{/if}
	{/foreach}
	</ul>
{/if}
{/function}
{categories_tree categories=$categories}
<script type="text/javascript">
$('div#categories_block_left ul.dhtml').hide();
</script>
</div>
</div>



Js
http://yadi.sk/d/qOs8fsxc3mHAm
css

#categories_block_left {}#categories_block_left h4 {background:#333333;}#categories_block_left .block_content {border:1px solid #d9d9d9;margin-top:1px; padding:0px;background:#f8f8f8}#categories_block_left ul.tree {padding:0px 0 0 0;}#categories_block_left ul.tree li:first-child {border-top:0px}#categories_block_left ul.tree li {padding:4px 9px;position:relative;border-top:1px solid #d9d9d9}#categories_block_left ul.tree li a {background:url(../images/marker.png) no-repeat left 4px;font:12px/18px Arial; color:#484848; padding-left:14px}#categories_block_left ul.tree li a:hover {color:#cb0a0a; background:url(../images/marker-hover.png) no-repeat left 4px}#categories_block_left ul.tree a.selected {background:url(../images/marker-hover.png) no-repeat left 4px; font-weight:bold}#categories_block_left ul.tree li ul {margin-left:-9px; width:238px;background:#ecebeb; margin-bottom:-4px; border-top:1px solid #d9d9d9; margin-top:4px}#categories_block_left ul.tree li ul li {padding:4px 0 4px 24px;}#categories_block_left ul.tree li ul li a {background:none; font:11px/18px Arial; color:#6d6c6c; padding-left:0}#categories_block_left ul.tree li ul li a:hover {background:none;}#categories_block_left ul.tree li ul li a.selected {background:none;color:#cb0a0a;font-weight:normal}#categories_block_left span.grower {width:7px;height:7px;display:block;cursor:pointer;position:absolute;right:8px;top:10px;}#categories_block_left span.OPEN {background:url(../images/categories_minus.png) 0px 0px no-repeat;}#categories_block_left span.CLOSE {background:url(../images/categories_plus.png) 0px 0px no-repeat;}
Link to post
Share on other sites
  • 1 year later...
  • 1 month later...
  • 2 months later...
  • 5 months later...

привет

что значит  "P.S. Уберите везде \." ?  

 

не получается это раскрытие сделать

 

 


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

<!-- Каталог -->
		<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

Если у Вас раскрывает, то дайте ссылку, где это работает.

 

А вообще код Ваш никудышний:

1. Очевидная ошибка в строке

   if(hide, ele.style.display == "block"){

   из-за которой это работать никак не может...

2. Используете в скрипте document.getElementById  - это прошлый век. Давно уже все делается на JQuery - проще и удобнее...

 

Если раскопали в Инете драгоценный код, то перед тем как выложить,  обращайте внимание 1) на дату, 2) на описание, 3) отзывы. Умением копировать-вставить вряд ли кого удивите...

Link to post
Share on other sites

вообще я это с первой страницы этой ветки взял  - якобы рабочий вариант

пробую на 2.3.7 поставить

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

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

Работой с шаблоном, стилями и прочим. Волшебный код для копирования-вставки вряд ли найдете.

Обращайтесь по контактам в профиле...

Link to post
Share on other sites

А подскажите,  как вывести подкатегории нужной мне категории? Где то я сделал не правильно

                    <li class="dropdown">
                         <a href="/catalog/mezhkomnatnye-dveri">Межкомнатные двери</a>
                        
                         {function name=dropdown_categories_tree2}
                         {if $categories}
                         <ul>
                         {foreach $categories as $c}
                              {* Показываем только нужную категорию по id *}
                              {if $c->id == 8}
                              {foreach $c->subcategories as $cat}
                                   <li>
                                        <a {if $category->id == $cat->id}class="selected"{/if} href="catalog/{$cat->url}" data-category="{$cat->id}">{$cat->name|escape}</a>
                                             {dropdown_categories_tree2 categories=$cat->subcategories}
                                   </li>
                              {/foreach}
                              {/if}
                         {/foreach}
                         </ul>
                         {/if}
                         {/function}
                         {dropdown_categories_tree2 categories=$categories}
                    </li>  
Link to post
Share on other sites

Принципиально неправильно у Вас как минимум два момента:

1.выискиваете какой-то похожий код и пытаетесь его изменить без понятия, почти наугад,

2. Не используете поиск по форуму. А ведь подобные вопросы обсуждались многократно, например

http://forum.simplacms.ru/topic/9166-%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4-%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B8-%D0%BF%D0%BE-id-%D0%BD%D0%B0-%D0%B4%D1%80%D1%83%D0%B3%D0%BE%D0%B9-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5/

Link to post
Share on other sites

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

<!-- Меню каталога -->
			<div id="catalog_menu">				
			{* Рекурсивная функция вывода дерева категорий *}
			{function name=categories_tree}
			{if $categories}
			<ul class="menu_vert">
			{foreach $categories as $c}
				{* Показываем только видимые категории *}
				{if $c->visible}
					<li>
						<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
						{categories_tree categories=$c->subcategories}
					</li>
				{/if}
			{/foreach}
			</ul>
			{/if}
			{/function}
			{categories_tree categories=$categories}
			</div>
			<!-- Меню каталога (The End)-->	

В случае структуры "каталог-категория" 

Edited by sanyok72
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...