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

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


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

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

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

подсказываю на примере "Раз" и дефолтного шаблона 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;}

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

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

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

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

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

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;}
Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...

а еще можно реализовать так - http://megabox.com.ua/

уважаемый Wizard, я так понимаю сайт сделан на шаблоне citymarket, если вас не затруднит, дайте код выпадающей менюшки

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

привет

что значит  "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. Уберите везде \.

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

                    <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>  
Ссылка на сообщение
Поделиться на другие сайты

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

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/

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

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

<!-- Меню каталога -->
			<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)-->	

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

Изменено пользователем sanyok72
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

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

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