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

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

вопрос

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

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

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

Юзер

144

ТeraMoune - 2018-12-053 апреля 2019 08:27 - #71878

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

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

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

Юзер

Turdex75 - 2018-12-053 апреля 2019 09:26 - #71879

Т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]

Юзер

144

ТeraMoune - 2018-12-053 апреля 2019 10:33 - #71882

Вы забыли о 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 - 2018-12-053 апреля 2019 10:44 - #71883

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

Юзер

144

ТeraMoune - 2018-12-053 апреля 2019 11:18 - #71884

Вам не подходит вариант с Хабра, видите ли {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 - 2018-12-053 апреля 2019 12:16 - #71885

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

Показать / Скрыть текст

HTML

[root]
<div class="mini-menu">
    <ul>
        [/root]
        [item]
        <li class="sub">
            <a href="{url}">{name}</a>
            [sub-prefix]
            <ul>[/sub-prefix]
                {sub-item}
                [sub-suffix]
            </ul>
            [/sub-suffix]
        </li>
        [/item]
        [root]
    </ul>
</div>
[/root]

и JS

 $('.sub > a').click(function(){
        $('.sub ul').slideUp();
        if ($(this).next().is(":visible")){
            $(this).next().slideUp();
        } else {
            $(this).next().slideToggle();
        }
        return false;
    });
    $('.mini-menu > ul > li > a').click(function(){
        $('.mini-menu > ul > li > a').removeClass('active');
        $(this).addClass('active');
    }),
        $('.sub ul li a').click(function(){
            $('.sub ul li a').removeClass('active');
            $(this).addClass('active');
        });

Юзер

144

ТeraMoune - 2018-12-053 апреля 2019 12:41 - #71886

Ну какой же '.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;
});