Аккордион меню

[aidynchik]

Разобрался...

 

В случае с данным модулем:

1. Включаем disableLink: true 

2. Правим в шаблоне вывод списка каталогов, добавляем еще одну ссылку. Изначально у нас есть что-то типа такого:

{if $categories}
	{foreach $categories as $c}
		{if $c->visible}
			<li>
			<a href="shop/{$c->url}.html" data-category="{$c->id}" {if $category->id == $c->id}class="active"{/if}>{$c->name}</a>
			{if $c->subcategories}<ul>{categories_tree categories=$c->subcategories}</ul>{/if}
			</li>
		{/if}
	{/foreach}
{/if} 

Внутри <li> у нас есть тег <a> - сама ссылка на категорию. Добавляем перед ним еще один, что бы выглядело примерно так:

{if $categories}
	{foreach $categories as $c}
		{if $c->visible}
			<li>
			<a class="p_acc" data-category="{$c->id}"></a>
			<a href="shop/{$c->url}.html" data-category="{$c->id}" {if $category->id == $c->id}class="active"{/if}>{$c->name}</a>
			{if $c->subcategories}<ul>{categories_tree categories=$c->subcategories}</ul>{/if}
			</li>
		{/if}
	{/foreach}
{/if} 

Новая тег <a> у нас имеет класс p_acc, в него будем помещать иконку раскрытия/свертывания разделов меню.

 

3. Открываем файл jquery.accordion.js в котором правим все упоминания тега <a> на a.p_acc, например:

var obj = this;
$objLinks = $('li > a.p_acc',obj);
$objSub = $('li > ul',obj);
if(defaults.classDisable){
	$objLinks = $('li:not(.'+defaults.classDisable+') > a.p_acc',obj);
	$objSub = $('li:not(.'+defaults.classDisable+') > ul',obj);
}
...

ну и так далее...

 

Тем самым,  jquery.accordion.js будет работать с a.p_acc и реагировать на свертывания/развертывания только по клику на него. Второй тег <a> останется просто ссылкой и по клике на него будет открывать родительский каталог, а не раскрывать дочерние элементы.

 

Останется только настроить стили

 

все сделал как написано, все прекрасно работает, НО, теперь подкатегории не остаются открытыми. То есть, к примеру раскрыта родительская категория "Книги", в ней подкатегория "Романы", если я щелкну на подкатегорию "Романы", то все меню закрывается и все.

 

P.S. подправил, надо менять не все подряд, Я поменял все до строки "function linkOver(){" и заработало, меню не схлопывается

Edited June 16, 2014 by aidynchik

[redesupar]

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

[infinity178]

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

Можно по разному реализовать можно через Smarty можно через jQuery

если smarty то по level

если jquery  то через селекты

[redesupar]

Можно по разному реализовать можно через Smarty можно через jQuery

если smarty то по level

если jquery  то через селекты

 

можно как нибудь поподробней? со smarty незнаком, в jquery не силён

[infinity178]

Простой пример на аналоговой иерархии:

 

1. CSS для визуального восприятия 

<style>
.drow_menu ul{margin-left: 10px;}  /* делаем отступ по 10px | становится визуально понятней */
</style>

2. jQuery функция

<script>
$(function(){
    $('.drow_menu li ul li').children('ul') // выявляем HTML элемент 
       .each(function(){                    // применяем функцию ко всем совпавшим
        $(this).css('display','block');     // устанавливаем CSS display = block
       });
});
</script>

 

3. HTML архитектура 

<UL class="drow_menu">
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2
<!-- убираем с экрана меню ниже 3-го уровня [в JS аккордион там автомат] -->
                <ul style="display: none;"> 
                    <li>3.1</li>
                    <li>3.2
                        <ul>
                            <li>4.1</li>
                            <li>4.2</li>
                            <li>4.3</li>
                            <li>4.4</li>
                        </ul>
                    </li>
                    <li>3.3</li>
                    <li>3.4</li>
                </ul>
            </li>    
            <li>2.3</li>
            <li>2.4</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</UL>

 

[sever]

 

Простой пример на аналоговой иерархии:

 

 

Виктор, когда Вы сдадите мне работу http://forum.simplacms.ru/topic/8101-%D0%B4%D0%BE%D0%BF%D0%B8%D0%BB%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B0-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%B0/

 

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

[aidynchik]

Добрый день всем!

Подскажите пожалуйста, реализовал аккордеон-меню.

Но теперь хочу, чтобы стрелочки были за блоком текста, иначе меню получается корявое, как их левее вынести?

Сейчас выглядит так (хотел приложить рисунок, но почему-то ошибка выходит):

Категория1

Категория2

-> Категория 3

-> Категория 4

Категория 5

 

 

А я хочу вот так:

    Категория1

    Категория2

-> Категория 3

-> Категория 4

    Категория 5

[voodoo_pan]

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

jquery.dcjqaccordion.2.*.js файл настройки скрипта Вас интересует параметр disableLink (по умолчанию он true ) нужно установить false, В этом файле вообще много чего интересного можно сделать.

[serg33]

Доброго времени суток, прошу сразу не пинать, но немного далековат от внутреннего кода, вообщем ситуация такая, 

прикрутил я аккордион с горем пополам за 2 суток на сайт, но работает он на default теме, а у меня WST используется, код вывода каталога такой

 

</div>

 

    <div id="content-container">

 

        <div id="content_right">

        {if $page && $page->url==''}{include file='slider.tpl'}{/if}

        {$content}

        </div>

 

        <div id="content_left">

 

            <div id="nav-container">

            

            {function name=categories_tree}

            {if $categories}

            

 

                <ul id="nav">

                {foreach $categories as $c}

                {if $c->visible}

                

                <li{if in_array($category->id, $c->children)} class="active"{/if}>

                <a href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>

                {if in_array($category->id, $c->children)}{categories_tree categories=$c->subcategories}{/if}

                </li>

                {/if}

                {/foreach}

                </ul>

            {/if}

            {/function}

            {categories_tree categories=$categories}

            </div>

 

Если менять nav на accordion слетает вся левая разметка сайта, подскажите что делать

Брал кусок вывода каталога из default все что ниже тоже начинает прыгать

как поставить аккордион и обойтись малыми жертвами

[usmdamir]

добрый день.

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

                        <!-- Меню каталога -->
<div id="catalog_menu">
			
{* Рекурсивная функция вывода дерева категорий *}
{function name=categories_tree}


{if $categories}
	{foreach $categories as $c}
		{if $c->visible}
			<li>
			<a class="p_acc" data-category="{$c->id}"></a>
			<a href="catalog/{$c->url}" data-category="{$c->id}" {if $category->id == $c->id}class="active"{/if}>{$c->name}</a>
			{if $c->subcategories}<ul>{categories_tree categories=$c->subcategories}</ul>{/if}
			</li>
		{/if}
	{/foreach}
{/if} 
{/function}
<ul class="accordion" id="accordion-1">
{categories_tree categories=$categories}
</ul>
</div>
<!-- Меню каталога (The End)-->

вот мой код меню

[AndreiX1]

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