Jump to content

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


Recommended Posts

  • Replies 67
  • Created
  • Last Reply

Top Posters In This Topic

Прошу прощения - это я не правильно поставил вопрос...
Как сделать вывод подподкатегорий (т.е. 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;        }    });
Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 7 months later...
<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>

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

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

 

Моё Решение (С огромной помощью 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 — Меню каталога*/

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

По принципу

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

а сейчас:

Картинка

категория

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 2 years later...

 

Моё Решение (С огромной помощью 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?

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...