Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как вывести аккордеон меню с помощью categorymenu ?

Как вывести аккордеон меню с помощью categorymenu ?


     03.04.2019    Все вопросы » Общие вопросы по вёрстке    1891

вопрос
Здравствуйте, у меня такая проблема,
Есть категория каталог в ней лежат все товары вот по такой структуре,
Каталог -> Аксессуары для кухни -> столешницы
новости добавляются только в столешницы.
т.е мне не нужно формировать ссылки на Аксессуары для кухни при на жатии на них будет открываться меню
Мне нужно меню вертикальное аккордеон, категорий очень много около 200.
как такое реализовать ?

Ответа пока нет


7 комментариев

ТeraMoune
Юзер

ТeraMoune - 3 апреля 2019 08:27 -

Поискать в интернете примеров целая куча, взять любой понравившийся и подогнать свою разметку под один из вариантов или наоборот вариант под свою разметку. Если вбить в поиск (аккордеон css) будет куча страниц где всё разобрано до мелочей нужно лишь потратить немного времени и внимательно всё читать, и следовать инструкциям.

Как пример:
https://htmlweb.ru/html/example/accordion.php
А тут целая куча
https://nisnom.com/podborka-razlichnyh-akkordeonov-dlya-sajta-html-css-i-javascript-jquery/

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

Turdex75
Юзер

Turdex75 - 3 апреля 2019 09:26 -

ТeraMoune,
Я вот как сделал,
но при открытии меню появляется первая пустая строка без имени и вторая берет адрес основной категории
[root]
<ul class="cd-accordion-menu">
[/root]
[item]
<li class="has-children">
<input type="checkbox" name="group-{id}" id="group-{id}">
<label for="group-{id}">{name}</label>
<ul>
<li><a href="{url}">{sub-item}</a></li>
</ul>
</li>
[/item]
[root]
</ul>
[/root]

ТeraMoune
Юзер

ТeraMoune - 3 апреля 2019 10:33 -

Вы забыли о sub-prefix


[sub-prefix]<ul>[/sub-prefix]
   {sub-item}
[sub-suffix]</ul>[/sub-suffix]

И

<li><a href="{url}">{sub-item}</a></li>

Замените на просто {sub-item}

Turdex75
Юзер

Turdex75 - 3 апреля 2019 10:44 -

ок но он не выводит ссылки то есть подменю не активное

ТeraMoune
Юзер

ТeraMoune - 3 апреля 2019 11:18 -

Вам не подходит вариант с Хабра, видите ли {sub-item} имеет разметку которая находится в [item] [/item]
Для того, чтобы была ссылка Вам надо там где инпут добавить ссылку там возле инпута и лабеля, но тогда и дочерние категории получат тот же инпут и лабель. Не подходит.

Вот пример

[root]<ul class="main-menu">[/root]
[item]
	<li [active]class="cat-active"[/active]><a href="{url}" [isparent]onclick="$(this).next().toggle(); return false;"[/isparent] class="[isparent]isparent[/isparent]">{name} <span style="float: right;">{news-count}</span></a>
	[sub-prefix]<ul>[/sub-prefix]{sub-item}[sub-suffix]</ul>[/sub-suffix]
	</li>
[/item]
[root]</ul>[/root]


CSS

.main-menu ul {display:none;}


[isparent] текст [/isparent]
Выводят текст заключенный в них, если категория является родительской и содержит в себе подкатегории Данный тег может использоваться только внутри тегов [item] [/item].

Turdex75
Юзер

Turdex75 - 3 апреля 2019 12:16 -

Ок я понял но теперь у меня другая проблема,
но при нажатии подменю меню сворачивается и не переходит по ссылку
есть вот такая структура

ТeraMoune
Юзер

ТeraMoune - 3 апреля 2019 12:41 -

Ну какой же '.sub > a', я же специально добавил в меню class="[isparent]isparent[/isparent]" и ниже написал описание взятое из документации по dle. И объяснил как работает это, а Вы взяли и на все ссылки повесили событие клика. А [isparent] и вовсе не использовали.


$('.isparent').click(function(){
$('.isparent').next('ul').hide(); 
$(this).next().toggle(); 
$('.articles-list-plain-t .active').removeClass('active'); 
$(this).addClass('active');                                           
return false;
});

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх