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

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


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

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

 

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

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(){" и заработало, меню не схлопывается

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

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

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

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

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

если smarty то по level

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

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

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

если smarty то по level

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

 

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

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

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

 

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>

 

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

 

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

 

 

Виктор, когда Вы сдадите мне работу 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/

 

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

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

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

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

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

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

Категория1

Категория2

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

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

Категория 5

 

 

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

    Категория1

    Категория2

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

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

    Категория 5

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

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

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

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

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

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

добрый день.

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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