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

Выпадающее меню категорий


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

  • Ответов 67
  • Дата создания
  • Последний ответ

Лучшие авторы в теме

Лучшие авторы в теме

Прошу прощения - это я не правильно поставил вопрос...
Как сделать вывод подподкатегорий (т.е. 3 вложенность).

initMenu('.categories ul');function initMenu(id) {    $(id + ' ul').hide().parent().addClass('subcat');    if($(id).find('a.selected')) {        $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show(); 		}		else $(id + ' ul:first').show();        $(id + ' a').click( function() {        checkElement = $(this).next();        if(checkElement.is('ul')) {            if(!checkElement.is(':visible')) {                $(id + ' ul:visible').slideUp('normal');                checkElement.slideDown('normal');            } else                checkElement.slideUp('normal');            return false;        }    });
Ссылка на сообщение
Поделиться на другие сайты

так вроде код вывода в шаблоне index.tpl за это отвечает, а скрипт только за анимацию. Я так понял у вас не выводятся вообще подПод категории?

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

C данным скриптом все выводится, но:
-> Выводится список главных категорий, при нажатии на нее, все как положено, меню раздвигается и выводится список подкатегорий.
-> Если есть вложенные элементы в подкатегорию (т.е. подподкатегории - 3 вложенность), то при клике на подкатегорию меню снова схлапывается, а именно категории... А вот при повторном клике уже снова раскрывается полностью до 3 вложенности, т.е. до подподкатегорий...

Нужно в функции дописать --> при клике на подкатегорию показывать ее подкатегорию... анимация аналогично... Вопрос что именно, я в jquery не силен???

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

Категории работают, но изображения нормально не показываются.
Как сделать? Я так понимаю есть конфликт.
И можно ли добавить + там, где есть подкатегории? (чтобы было видно что есть вложения)

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

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

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

Спасибо! Поставил все работает, но вот только действительно до 3 подкатегории, если добавить еще одну, то остальные в этой же категории становятся не активны! Не подскажете что дописать чтобы исправить это?

Ссылка на сообщение
Поделиться на другие сайты
  • 7 месяцев спустя...
<script language="javascript" type="text/javascript">
	$(document).ready(function() {
    initMenu('.categories ul');

function initMenu(id) {
    $(id + ' ul').hide().parent().addClass('subcat');
    if($(id).find('a.selected')) {
        $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show();
    }
    else $(id + ' ul:first').show();
        $(id + ' a').click( function() {
        checkElement = $(this).next();
        if(checkElement.is('ul')) {
            if(!checkElement.is(':visible')) {
//                $(id + ' ul:visible').slideUp('slow');
                checkElement.slideDown('slow');
            } else
                checkElement.slideUp('slow');
            return false;
        }
    });
}})
         </script>

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

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

 

Моё Решение (С огромной помощью igoryk):

1. Скрипт перед

</head>
:
{literal}
 <script type="text/javascript" src="js/jquery/jquery.js"></script>
 <script langugage="javascript" type="text/javascript">
	$(document).ready(function() {
    initMenu('.categories ul');

function initMenu(id) {
    $(id + ' ul').hide().parent().addClass('subcat');
    if($(id).find('a.selected')) {
        $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show();
    }
    else $(id + ' ul:first').show();
        $(id + ' a').click( function() {
        checkElement = $(this).next();
        if(checkElement.is('ul')) {
            if(!checkElement.is(':visible')) {
//                $(id + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            } else
                checkElement.slideUp('normal');
            return false;
        }
    });
}})
         </script>
         {/literal}

2. Меняем рекурсивный вывод категорий (если у кого не такой) на:

<!-- Меню каталога -->
			{* Рекурсивная функция вывода дерева категорий *}
			<div class=categories>

			{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)-->

3. Меняем в style.css (и настраиваем под Себя):

/* @group Меню каталога*/
.categories ul, .categories li {
	padding-top: 5px;
        margin: 0;
        list-style: none;
        background: none;
}
.categories a {
	color: #000033; 
        padding: 5px 5px 5px 10px; 
        border-bottom: solid 1px #fff; 
        text-decoration: none; 
        display: block; 
        font: 18px Tahoma, Arial;
}
.categories a:hover {
	text-decoration: underline;
        background: #eb540d;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
}
.categories ul ul a:hover {
	text-decoration: none;
}
.categories ul ul {
	margin-right: 3px;
        background: #f9f9f8;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        padding: 2px 0 6px 14px;
}
.categories li.subcat {
	background: none;
}
.categories ul ul li {
	margin-right: 3px;
        margin-bottom: 1px;
        background: none;
}
.categories ul ul a {
	color: #34627b;
        text-decoration: underline;
        font: 14px Tahoma, Arial;
        border: none;
}

.categories ul li a.selected {
	color: #eb540d;
        text-decoration: underline;
        font: 18px Tahoma, Arial;
        border: none;
}

.categories ul ul li a.selected  {
	font-weight: bold;
        color: #eb540d;
        font-size: 14px;
}
.categories ul ul ul li a.selected  {
	font-weight: bold;
        color: #eb540d;
        font-size: 14px;
}
/* @end — Меню каталога*/

Поставилось и работает корректно, но картинки категории ставятся над категорией, а хотелось бы с левого края названия

По принципу

" Картинка- категория",

а сейчас:

Картинка

категория

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

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

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

 

Моё Решение (С огромной помощью igoryk):

1. Скрипт перед

</head>
:
{literal}
 <script type="text/javascript" src="js/jquery/jquery.js"></script>
 <script langugage="javascript" type="text/javascript">
	$(document).ready(function() {
    initMenu('.categories ul');

function initMenu(id) {
    $(id + ' ul').hide().parent().addClass('subcat');
    if($(id).find('a.selected')) {
        $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show();
    }
    else $(id + ' ul:first').show();
        $(id + ' a').click( function() {
        checkElement = $(this).next();
        if(checkElement.is('ul')) {
            if(!checkElement.is(':visible')) {
//                $(id + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            } else
                checkElement.slideUp('normal');
            return false;
        }
    });
}})
         </script>
         {/literal}

2. Меняем рекурсивный вывод категорий (если у кого не такой) на:

<!-- Меню каталога -->
			{* Рекурсивная функция вывода дерева категорий *}
			<div class=categories>

			{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)-->

3. Меняем в style.css (и настраиваем под Себя):

/* @group Меню каталога*/
.categories ul, .categories li {
	padding-top: 5px;
        margin: 0;
        list-style: none;
        background: none;
}
.categories a {
	color: #000033; 
        padding: 5px 5px 5px 10px; 
        border-bottom: solid 1px #fff; 
        text-decoration: none; 
        display: block; 
        font: 18px Tahoma, Arial;
}
.categories a:hover {
	text-decoration: underline;
        background: #eb540d;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
}
.categories ul ul a:hover {
	text-decoration: none;
}
.categories ul ul {
	margin-right: 3px;
        background: #f9f9f8;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        padding: 2px 0 6px 14px;
}
.categories li.subcat {
	background: none;
}
.categories ul ul li {
	margin-right: 3px;
        margin-bottom: 1px;
        background: none;
}
.categories ul ul a {
	color: #34627b;
        text-decoration: underline;
        font: 14px Tahoma, Arial;
        border: none;
}

.categories ul li a.selected {
	color: #eb540d;
        text-decoration: underline;
        font: 18px Tahoma, Arial;
        border: none;
}

.categories ul ul li a.selected  {
	font-weight: bold;
        color: #eb540d;
        font-size: 14px;
}
.categories ul ul ul li a.selected  {
	font-weight: bold;
        color: #eb540d;
        font-size: 14px;
}
/* @end — Меню каталога*/

 

А кто может подсказать, как к данному решению прикрутить сохранение активной вкладки при обновлении страницы

будь то cookie или localStorage?

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

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

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

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

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

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

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

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

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

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