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

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


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

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

    Ссылка на сайт разработчика скрипта Аккордион

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

    Не качает архив

    The requested URL /docs.google.com/file/d/0ByizX99jZxTKYjFyNFFLVVFrMW8/edit was not found on this server.

    Можете выложить еще где-нибудь? или можно на почту fan550@yandex.ru
     

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

    Всем доброго дня. Кто возьмётся реализовать вертикальное меню, как на примере  http://www.computeruniverse.ru/  

    Одно условие - не требовать доступ к FTP. Ответы, пож., в личку

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

    все же скорее не работает, чем наоборот :wacko:

    upd: прошу прощения, все работает. просто эта вот запись в одну строчку и два варианта... о-ёй :blink:

    и спасибо, конечно

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

    Скиньте пожалуйста рабочий вариант этот, кому не сложно и не в одну строчку =))

    {* Аккордеон меню *}
    	<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)-->
    			
    <!-- Все бренды -->
    
    
    Ссылка на сообщение
    Поделиться на другие сайты
    • 2 месяца спустя...

    Скиньте пожалуйста рабочий вариант этот, кому не сложно и не в одну строчку =))

    Тут какие то вредителе, говорят А, но дальше мороз полный или за деньги... Вот и с этим меню все расписали подробно, но не Все.

    Народ форум существует на 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 он и будет отвечать за вид Вашего меню.

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

    Сделал все поинструкции не хочет работать! :( Только скорость загрузки сайта увеличилась..

    Делал по варианту  bjiaguk.

    Проблема bjiaguk примера скрипта находится в усановке класов.... их выстовлять желательно в самом скрипте.

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

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

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

     

    {* Аккордеон меню *}
    	<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)-->
    			
    <!-- Все бренды -->
    
    

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

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

    А как сделать так, чтобы активный пункт меню подсвечивался цветом как тут hobbycenter.ru? Попробовал так:

     

    .accordion-parent-li .active - не работает. 

    #catalog_menu li .active - не работает.

    .accordion .active - подсвечивает саму надпись, задача подсветить li

    .accordion li .active - не работает

    .accordion .active  li - не работает

     

     

    Данную задачу вообще возможно решить средствами CSS? На фрумах пишут, что без jquery задача нереальная. Помогите разобраться - тема достаточно популярная. Если кто-то может реализовать, но не хочет делиться познаниями - пишите обговорим сумму =) Господа, сижу второй день выручайте!

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

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

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

    для 

    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/

    Вроде всё правильно

     

    Сайт остался без изменений, подскажи, пожалуйста, что ещё нужно сделать?

     

    Сайт запускаю на денвере.

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

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

    Помогите!!!

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

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

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

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

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

     

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

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

     

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

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

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

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

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

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

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

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

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

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

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