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


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

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


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

#1 ps-simpla

ps-simpla

    Модератор в запасе :)

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

Опубликовано 03.09.2013 - 18:08

1378227634_click.png1378227647_hover.png
 
Многие спрашивают на форуме как реализовать меню аккордион ))
вот решил поделиться
 
Два вида работы:
- при нажатии выпадает список
- при наведении выпадает список
 
Установка:
1. скачиваем архив и загружаем его в папку с шаблоном
2. в index.tpl перед </head> вставляем 

{* Аккордион меню *}<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><script type="text/javascript">$(document).ready(function($){$('#accordion-1').dcAccordion({classParent : 'accordion-parent', // class liclassActive : '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 или truedisableLink: true, // активна ссылка - "false" - нет, "true" - да (используется с eventType: 'hover')speed: 'show' // ...});$('#accordion-2').dcAccordion({classParent : 'accordion-parent', // class liclassActive : 'active', // calss если активирована сылкаclassArrow : 'accordion-icon', // class иконкиclassCount : 'accordion-count', // class в котором выводится кол-во пунктов в менюclassExpand : 'accordion-current-parent', // ...eventType: 'hover', // варинт работы меню "hover" - при наведении "click" - при нажатииhoverDelay: 10, // скорость появления подпунктовmenuClose: true, // ...autoClose: true, // скрытие подменю, если наводим на другой пункт менюsaveState: false, // сохранение перехода и добавление класса activeautoExpand: false, // ...showCount: true, // показывать кол-во пунктов в меню false или truedisableLink: false, // переход по сссылке гля главной категории - "false" - нет, "true" - да (используется с eventType: 'hover')speed: 'show' // ...});});</script>{* END : Аккордион меню *}


 
 



3. в нужно место где выводим меню вставляем
 
<!-- Меню каталога --><h1>CLICK</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><h1>HOVER</h1><div id="catalog_menu">{* Рекурсивная функция вывода дерева категорий *}{function name=categories_trees}{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_trees categories=$c->subcategories}</ul>{/if}</li>{/if}{/foreach}{/if}{/function}<ul class="accordion" id="accordion-2">{categories_trees categories=$categories}</ul></div><!-- Меню каталога (The End)-->


 
В примере два вида сделал. Лишний можно удалить.

 
 
Ссылка на архив: скачать с Диск Gooogle
Ссылка на сайт разработчика скрипта Аккордион

#2 Kostyafan

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

Опубликовано 05.09.2013 - 13:39

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

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

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



#3 Danya

Danya
  • Фрилансер
  • 908 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x

Опубликовано 05.09.2013 - 14:15

https://docs.google....rMW8/edit?pli=1

 

нажимаете файл\скачать



#4 Kostyafan

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

Опубликовано 05.09.2013 - 14:25

Спасибо, скачал, щас попробую )



#5 xmaks82

xmaks82
  • Пользователь
  • 8 сообщений
  • Версия CMS:2.x

Опубликовано 21.09.2013 - 17:08

все прекрасно работает, реализовано на двух сайтах



#6 Гость_blockinfo_*

Гость_blockinfo_*
  • Гости

Опубликовано 22.09.2013 - 10:06

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

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



#7 ps-simpla

ps-simpla

    Модератор в запасе :)

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

Опубликовано 22.09.2013 - 19:38

я готов взяться!



#8 bjiaguk

bjiaguk
  • Пользователь
  • 19 сообщений
  • Дизайн, Верстка
  • Версия CMS:1.x, 2.x

Опубликовано 06.11.2013 - 00:24

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

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

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



#9 kallifan

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

Опубликовано 08.11.2013 - 14:03

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



#10 bjiaguk

bjiaguk
  • Пользователь
  • 19 сообщений
  • Дизайн, Верстка
  • Версия CMS:1.x, 2.x

Опубликовано 08.11.2013 - 17:36

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

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



#11 nigga

nigga
  • Пользователь
  • 527 сообщений
  • Заказчик
  • Версия CMS:1.x
  • Откуда:Мухоршибирь

Опубликовано 13.11.2013 - 14:48

а для simpla 1.4 покатит?



#12 voodoo_pan

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

Опубликовано 04.02.2014 - 19:37

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

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

Народ форум существует на 90 пользователей нулом учитывайте это, А коршуны тут тупо кормятся ... нет бы вывести этот движок на open source, так нет.....

 

Ладно вернемся к меню аккордеон.

 

Править будем index.tpl

 

для этого по ссылки http://www.designche...on-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 он и будет отвечать за вид Вашего меню.



#13 voodoo_pan

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

Опубликовано 04.02.2014 - 19:58

а для simpla 1.4 покатит?

покатит под все вопрос куда и как крутить будешь.



#14 BelovRN

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

Опубликовано 07.02.2014 - 14:20

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

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



#15 voodoo_pan

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

Опубликовано 12.02.2014 - 23:26

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

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

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



#16 ky3mu4

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

Опубликовано 18.03.2014 - 12:54

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



#17 Karen

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

Опубликовано 25.03.2014 - 10:50

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

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



#18 seplay

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

Опубликовано 27.04.2014 - 14:19

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

 

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

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

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

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

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

 

 

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



#19 Karen

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

Опубликовано 06.05.2014 - 09:27

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



#20 Илья

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

Опубликовано 06.05.2014 - 16:04

для 

voodoo_pan

 

 

1. "для этого по ссылки http://www.designche...on-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.designche...etting-started/

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

 

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

 

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






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

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