Перейти к содержимому


Фото
* * * * * 3 голосов

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


  • Чтобы отвечать, сперва войдите на форум
34 ответов в теме

#21 Karen

Karen
  • Пользователь
  • 186 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x

Опубликовано 07.05.2014 - 22:03

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

Помогите!!!



#22 Slayer

Slayer
  • Пользователь
  • 7 сообщений

Опубликовано 13.05.2014 - 12:24

вроде все сделал правильно, не работает(

design/{$settings->theme}/accordion/css/accordion.css

убери accordion/

design/{$settings->theme}/css/accordion.css



#23 vidicar

vidicar
  • Пользователь
  • 123 сообщений
  • Заказчик
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 14.05.2014 - 13:51

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



#24 Gloobus

Gloobus
  • Фрилансер
  • 133 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 05.06.2014 - 15:34

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

Присоединяюсь к вопросу, может кто-то делал, или использовал другой плагин "аккордион меню"? Нужно, разделить возможность раскрытия меню с переходом по ссылке. Например иконка (+) перед названием меню, по клике на нее, раскрывается меню, а по клике на название, происходит переход по ссылке.



#25 Gloobus

Gloobus
  • Фрилансер
  • 133 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 06.06.2014 - 08:12

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

 

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

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> останется просто ссылкой и по клике на него будет открывать родительский каталог, а не раскрывать дочерние элементы.

 

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



#26 aidynchik

aidynchik
  • Пользователь
  • 21 сообщений
  • Откуда:Казахстан

Опубликовано 16.06.2014 - 06:58

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

 

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

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, 16.06.2014 - 07:01


#27 redesupar

redesupar
  • Пользователь
  • 7 сообщений

Опубликовано 13.11.2014 - 17:55

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



#28 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 14.11.2014 - 08:13

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

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

если smarty то по level

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



#29 redesupar

redesupar
  • Пользователь
  • 7 сообщений

Опубликовано 14.11.2014 - 09:00

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

если smarty то по level

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

 

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



#30 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 14.11.2014 - 11:40

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

 

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>

 



#31 sever

sever
  • Пользователь
  • 22 сообщений
  • Откуда:СПб

Опубликовано 18.11.2014 - 10:31

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

 

 

Виктор, когда Вы сдадите мне работу http://forum.simplac...ерстка-готова/

 

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



#32 aidynchik

aidynchik
  • Пользователь
  • 21 сообщений
  • Откуда:Казахстан

Опубликовано 18.12.2014 - 07:17

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

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

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

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

Категория1

Категория2

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

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

Категория 5

 

 

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

    Категория1

    Категория2

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

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

    Категория 5



#33 voodoo_pan

voodoo_pan
  • Пользователь
  • 129 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Харьков

Опубликовано 25.04.2015 - 23:45

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

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



#34 serg33

serg33
  • Пользователь
  • 2 сообщений
  • Пользователь

Опубликовано 02.11.2015 - 01:35

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

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


#35 usmdamir

usmdamir
  • Пользователь
  • 40 сообщений
  • Программирование

Опубликовано 31.08.2017 - 23:36

добрый день.

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



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

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






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых