ps-simpla Опубликовано 3 сентября, 2013 Жалоба Поделиться Опубликовано 3 сентября, 2013 http://ps-simpla.ru/uploads/posts/2013-09/1378227634_click.pnghttp://ps-simpla.ru/uploads/posts/2013-09/1378227647_hover.png Многие спрашивают на форуме как реализовать меню аккордион )) вот решил поделиться Два вида работы: - при нажатии выпадает список - при наведении выпадает список Установка: 1. скачиваем архив и загружаем его в папку с шаблоном 2. в index.tpl перед вставляем {* Аккордион меню *}{* END : Аккордион меню *} 3. в нужно место где выводим меню вставляем CLICK{* Рекурсивная функция вывода дерева категорий *}{function name=categories_tree}{if $categories}{foreach $categories as $c}{* Показываем только видимые категории *}{if $c->visible}id == $c->id}class="active"{/if}>{$c->name}{if $c->subcategories}{categories_tree categories=$c->subcategories}{/if}{/if}{/foreach}{/if}{/function}{categories_tree categories=$categories}HOVER{* Рекурсивная функция вывода дерева категорий *}{function name=categories_trees}{if $categories}{foreach $categories as $c}{* Показываем только видимые категории *}{if $c->visible}id == $c->id}class="active"{/if}>{$c->name}{if $c->subcategories}{categories_trees categories=$c->subcategories}{/if}{/if}{/foreach}{/if}{/function}{categories_trees categories=$categories} В примере два вида сделал. Лишний можно удалить. Ссылка на архив: скачать с Диск Gooogle Ссылка на сайт разработчика скрипта Аккордион Цитата Ссылка на сообщение Поделиться на другие сайты
Kostyafan Опубликовано 5 сентября, 2013 Жалоба Поделиться Опубликовано 5 сентября, 2013 Не качает архивThe requested URL /docs.google.com/file/d/0ByizX99jZxTKYjFyNFFLVVFrMW8/edit was not found on this server.Можете выложить еще где-нибудь? или можно на почту fan550@yandex.ru Цитата Ссылка на сообщение Поделиться на другие сайты
Danya Опубликовано 5 сентября, 2013 Жалоба Поделиться Опубликовано 5 сентября, 2013 https://docs.google.com/file/d/0ByizX99jZxTKYjFyNFFLVVFrMW8/edit?pli=1 нажимаете файл\скачать Цитата Ссылка на сообщение Поделиться на другие сайты
Kostyafan Опубликовано 5 сентября, 2013 Жалоба Поделиться Опубликовано 5 сентября, 2013 Спасибо, скачал, щас попробую ) Цитата Ссылка на сообщение Поделиться на другие сайты
xmaks82 Опубликовано 21 сентября, 2013 Жалоба Поделиться Опубликовано 21 сентября, 2013 все прекрасно работает, реализовано на двух сайтах Цитата Ссылка на сообщение Поделиться на другие сайты
Гость blockinfo Опубликовано 22 сентября, 2013 Жалоба Поделиться Опубликовано 22 сентября, 2013 Всем доброго дня. Кто возьмётся реализовать вертикальное меню, как на примере http://www.computeruniverse.ru/ Одно условие - не требовать доступ к FTP. Ответы, пож., в личку Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 22 сентября, 2013 Автор Жалоба Поделиться Опубликовано 22 сентября, 2013 я готов взяться! Цитата Ссылка на сообщение Поделиться на другие сайты
bjiaguk Опубликовано 5 ноября, 2013 Жалоба Поделиться Опубликовано 5 ноября, 2013 все же скорее не работает, чем наоборот upd: прошу прощения, все работает. просто эта вот запись в одну строчку и два варианта... о-ёй и спасибо, конечно Цитата Ссылка на сообщение Поделиться на другие сайты
kallifan Опубликовано 8 ноября, 2013 Жалоба Поделиться Опубликовано 8 ноября, 2013 Скиньте пожалуйста рабочий вариант этот, кому не сложно и не в одну строчку =)) Цитата Ссылка на сообщение Поделиться на другие сайты
bjiaguk Опубликовано 8 ноября, 2013 Жалоба Поделиться Опубликовано 8 ноября, 2013 Скиньте пожалуйста рабочий вариант этот, кому не сложно и не в одну строчку =)) {* Аккордеон меню *} <link rel="stylesheet" href="design/{$settings->theme}/accordion/css/accordion.css" type="text/css" media="screen" /> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.dcjqaccordion.2.9.js'></script> {literal} <script type="text/javascript"> $(document).ready(function($){$('#accordion-1').dcAccordion({classParent : 'accordion-parent', // class li classActive : 'active', // calss если активирована сылка classArrow : 'accordion-icon', // class иконки classCount : 'accordion-count', // class в котором выводится кол-во пунктов в меню classExpand : 'accordion-current-parent', // ... eventType: 'click', // варинт работы меню "hover" - при наведении "click" - при нажатии hoverDelay: 10, // скорость появления подпунктов menuClose: true, // ... autoClose: true, // скрытие подменю, если наводим на другой пункт меню saveState: false, // сохранение перехода и добавление класса activeautoExpand: false, // ... showCount: true, // показывать кол-во пунктов в меню false или true disableLink: true, // активна ссылка - "false" - нет, "true" - да (используется с eventType: 'hover') speed: 'show' // ... }); }); </script> {/literal} {* END : Аккордеон меню *} </head> <body> <!-- Верхняя строка --> мне нужен вариант открытия меню "по щелчку"))) его я и реализовал <!-- конец Поиск --> <!-- Меню каталога --> <h1>Каталог</h1> <div id="catalog_menu"> {* Рекурсивная функция вывода дерева категорий *} {function name=categories_tree} {if $categories} {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <li> <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)--> <!-- Все бренды --> Цитата Ссылка на сообщение Поделиться на другие сайты
nigga Опубликовано 13 ноября, 2013 Жалоба Поделиться Опубликовано 13 ноября, 2013 а для simpla 1.4 покатит? Цитата Ссылка на сообщение Поделиться на другие сайты
voodoo_pan Опубликовано 4 февраля, 2014 Жалоба Поделиться Опубликовано 4 февраля, 2014 Скиньте пожалуйста рабочий вариант этот, кому не сложно и не в одну строчку =))Тут какие то вредителе, говорят А, но дальше мороз полный или за деньги... Вот и с этим меню все расписали подробно, но не Все.Народ форум существует на 90 пользователей нулом учитывайте это, А коршуны тут тупо кормятся ... нет бы вывести этот движок на open source, так нет..... Ладно вернемся к меню аккордеон. Править будем index.tpl для этого по ссылки http://www.designchemical.com/lab/jquery-plugins/jquery-vertical-accordion-menu.2.7.zipкачаем комплект всего что вам может понадобится для красивого меню. В архиве также примеры и варианты оформления меню.Приступим... <link rel="stylesheet" href="design/{$settings->theme}/accordion/css/accordion.css" type="text/css" media="screen" />(строка вообще ненужна это стили кнопок, прийдется переписовать под себя и делать это надо в родном файле css магазина) желательно добавить еще один макрос (рекамендация с оф сайта)src="js/accordion/jquery.cookie.js"></script> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.dcjqaccordion.2.9.js'></script> теперь косательно JS скриптов'design/{$settings->theme} путь база выкинуть нафиг и указать прямой путь к файлам пример:src="js/accordion/jquery.hoverIntent.minified.js" Будет где то так: <head>что бы скрип загружался до начала работы сайта.---------------------------{* Меню акардион *} <script type="text/javascript" src="js/accordion/jquery.cookie.js"></script> <script type="text/javascript" src="js/accordion/jquery.hoverIntent.minified.js"></script> <script type="text/javascript" src="js/accordion/jquery.dcjqaccordion.2.7.min.js"></script> запускаем сам скрипт. (все настройки по умолчанию)----------------------------{literal}<script> jQuery(document).ready(function($){jQuery('#accordion').dcAccordion();}); {/literal}</script> -----------------------------</head> в теле находим: <!-- Меню каталога --> <div id="catalog_menu"> {* Рекурсивная функция вывода дерева категорий *} {function name=categories_tree} {if $categories} <ul id="accordion" class="menu"> /значению UL присваиваем стиль и класс, больше нечего менять ненадо/ {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <li>На этом пожалуй все.Сделать красивое меню в дальнейшем вам поможет в файле CSS созданный вами стиль #accordion он и будет отвечать за вид Вашего меню. Цитата Ссылка на сообщение Поделиться на другие сайты
voodoo_pan Опубликовано 4 февраля, 2014 Жалоба Поделиться Опубликовано 4 февраля, 2014 а для simpla 1.4 покатит?покатит под все вопрос куда и как крутить будешь. Цитата Ссылка на сообщение Поделиться на другие сайты
BelovRN Опубликовано 7 февраля, 2014 Жалоба Поделиться Опубликовано 7 февраля, 2014 Сделал все поинструкции не хочет работать! Только скорость загрузки сайта увеличилась..Делал по варианту bjiaguk. Цитата Ссылка на сообщение Поделиться на другие сайты
voodoo_pan Опубликовано 12 февраля, 2014 Жалоба Поделиться Опубликовано 12 февраля, 2014 Сделал все поинструкции не хочет работать! Только скорость загрузки сайта увеличилась..Делал по варианту bjiaguk.Проблема bjiaguk примера скрипта находится в усановке класов.... их выстовлять желательно в самом скрипте. Цитата Ссылка на сообщение Поделиться на другие сайты
ky3mu4 Опубликовано 18 марта, 2014 Жалоба Поделиться Опубликовано 18 марта, 2014 есть вопрос: при клике на корневую папку проходит переход на страницу товаров данной категории. при этом после загрузки страницы данная категория становится "закрытой" (свернутой). это можно как нибудь подправить? Цитата Ссылка на сообщение Поделиться на другие сайты
Karen Опубликовано 25 марта, 2014 Жалоба Поделиться Опубликовано 25 марта, 2014 {* Аккордеон меню *} <link rel="stylesheet" href="design/{$settings->theme}/accordion/css/accordion.css" type="text/css" media="screen" /> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='design/{$settings->theme}/accordion/js/jquery.dcjqaccordion.2.9.js'></script> {literal} <script type="text/javascript"> $(document).ready(function($){$('#accordion-1').dcAccordion({classParent : 'accordion-parent', // class li classActive : 'active', // calss если активирована сылка classArrow : 'accordion-icon', // class иконки classCount : 'accordion-count', // class в котором выводится кол-во пунктов в меню classExpand : 'accordion-current-parent', // ... eventType: 'click', // варинт работы меню "hover" - при наведении "click" - при нажатии hoverDelay: 10, // скорость появления подпунктов menuClose: true, // ... autoClose: true, // скрытие подменю, если наводим на другой пункт меню saveState: false, // сохранение перехода и добавление класса activeautoExpand: false, // ... showCount: true, // показывать кол-во пунктов в меню false или true disableLink: true, // активна ссылка - "false" - нет, "true" - да (используется с eventType: 'hover') speed: 'show' // ... }); }); </script> {/literal} {* END : Аккордеон меню *} </head> <body> <!-- Верхняя строка --> мне нужен вариант открытия меню "по щелчку"))) его я и реализовал <!-- конец Поиск --> <!-- Меню каталога --> <h1>Каталог</h1> <div id="catalog_menu"> {* Рекурсивная функция вывода дерева категорий *} {function name=categories_tree} {if $categories} {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <li> <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)--> <!-- Все бренды --> вроде все сделал правильно, не работает( Цитата Ссылка на сообщение Поделиться на другие сайты
seplay Опубликовано 27 апреля, 2014 Жалоба Поделиться Опубликовано 27 апреля, 2014 А как сделать так, чтобы активный пункт меню подсвечивался цветом как тут hobbycenter.ru? Попробовал так: .accordion-parent-li .active - не работает. #catalog_menu li .active - не работает..accordion .active - подсвечивает саму надпись, задача подсветить li.accordion li .active - не работает.accordion .active li - не работает Данную задачу вообще возможно решить средствами CSS? На фрумах пишут, что без jquery задача нереальная. Помогите разобраться - тема достаточно популярная. Если кто-то может реализовать, но не хочет делиться познаниями - пишите обговорим сумму =) Господа, сижу второй день выручайте! Цитата Ссылка на сообщение Поделиться на другие сайты
Karen Опубликовано 6 мая, 2014 Жалоба Поделиться Опубликовано 6 мая, 2014 Можно ли сделать так, чтоб при нажатии на категорию отображался весь товар категории, у меня выпадает меню до того, пока не зайду аж в конечную категорию. Только то в конечной категории отображается ее товар. Цитата Ссылка на сообщение Поделиться на другие сайты
Илья Опубликовано 6 мая, 2014 Жалоба Поделиться Опубликовано 6 мая, 2014 для voodoo_pan 1. "для этого по ссылки http://www.designchemical.com/lab/jquery-plugins/jquery-vertical-accordion-menu.2.7.zip качаем комплект всего что вам может понадобится для красивого меню." Скачал. Файлы скриптов скопировал в папку скриптов. 2. строку "<link rel="stylesheet" href="design/{$settings->theme}/accordion/css/accordion.css" type="text/css" media="screen" />" Закомментил 3. "head>что бы скрип загружался до начала работы сайта.---------------------------{* Меню акардион *} <script type="text/javascript" src="js/accordion/jquery.cookie.js"></script> <script type="text/javascript" src="js/accordion/jquery.hoverIntent.minified.js"></script> <script type="text/javascript" src="js/accordion/jquery.dcjqaccordion.2.7.min.js"></script>запускаем сам скрипт. (все настройки по умолчанию)----------------------------{literal}<script> jQuery(document).ready(function($){jQuery('#accordion').dcAccordion();});{/literal}</script>-----------------------------</head>" Добавил 4. id="accordion" class="menu" Добавил 5. пример:src="js/accordion/jquery.hoverIntent.minified.js" путь указал тот, где лежат файлы скриптов 6. почитал инфу на http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/getting-started/Вроде всё правильно Сайт остался без изменений, подскажи, пожалуйста, что ещё нужно сделать? Сайт запускаю на денвере. Цитата Ссылка на сообщение Поделиться на другие сайты
Karen Опубликовано 7 мая, 2014 Жалоба Поделиться Опубликовано 7 мая, 2014 Можно ли сделать так, чтоб при нажатии на категорию отображался весь товар категории, у меня выпадает меню до того, пока не зайду аж в конечную категорию. Только то в конечной категории отображается ее товар.Помогите!!! Цитата Ссылка на сообщение Поделиться на другие сайты
Slayer Опубликовано 13 мая, 2014 Жалоба Поделиться Опубликовано 13 мая, 2014 вроде все сделал правильно, не работает(design/{$settings->theme}/accordion/css/accordion.cssубери accordion/design/{$settings->theme}/css/accordion.css Цитата Ссылка на сообщение Поделиться на другие сайты
vidicar Опубликовано 14 мая, 2014 Жалоба Поделиться Опубликовано 14 мая, 2014 Подскажите, а такое меню можно сделать горизонтальным, а не вертикальным? Цитата Ссылка на сообщение Поделиться на другие сайты
Gloobus Опубликовано 5 июня, 2014 Жалоба Поделиться Опубликовано 5 июня, 2014 Можно ли сделать так, чтоб при нажатии на категорию отображался весь товар категории, у меня выпадает меню до того, пока не зайду аж в конечную категорию. Только то в конечной категории отображается ее товар.Присоединяюсь к вопросу, может кто-то делал, или использовал другой плагин "аккордион меню"? Нужно, разделить возможность раскрытия меню с переходом по ссылке. Например иконка (+) перед названием меню, по клике на нее, раскрывается меню, а по клике на название, происходит переход по ссылке. Цитата Ссылка на сообщение Поделиться на другие сайты
Gloobus Опубликовано 6 июня, 2014 Жалоба Поделиться Опубликовано 6 июня, 2014 Разобрался... В случае с данным модулем: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> останется просто ссылкой и по клике на него будет открывать родительский каталог, а не раскрывать дочерние элементы. Останется только настроить стили Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.