Модификация Меню Категорий

Разработчикам Общение разработчиков
1

Доброго времени суток.

Знает ли кто нибудь ответ на такой вопрос: можно ли кастомизировать только с помощью CSS вертикальное меню категорий вот по таким критериям:

  1. Отобразить кнопку меню в обычном десктопном виде.
  2. Скрыть все элементы меню.
  3. Открыть меню по нажатии на кнопку меню.
  4. Закрыть меню при нажатии на кнопку меню.
  5. Чтобы при выпадении меню, контент который был снизу не смещался, а список меню был сверху элементов.

2

Боюсь, что придется все-таки javascript подключать

3

Доброго времени суток.

Знает ли кто нибудь ответ на такой вопрос: можно ли кастомизировать только с помощью CSS вертикальное меню категорий вот по таким критериям:

  1. Отобразить кнопку меню в обычном десктопном виде.
  2. Скрыть все элементы меню.
  3. Открыть меню по нажатии на кнопку меню.
  4. Закрыть меню при нажатии на кнопку меню.
  5. Чтобы при выпадении меню, контент который был снизу не смещался, а список меню был сверху элементов.

Привет. Соглашусь с предыдущим ответчиком ) Некоторые задачи можно решить с помощью псевдоклассов, но 100% покрытия css-ом не получиться.

А почему именно css ? Какова причина ?

4

Привет. Соглашусь с предыдущим ответчиком ) Некоторые задачи можно решить с помощью псевдоклассов, но 100% покрытия css-ом не получиться.

А почему именно css ? Какова причина ?

Привет!

Просто лишний раз не особо хочется нагружать шаблон дополнительными JS.

5

Добрый день! Подскажите Вы решили проблему при помощи javascript?

6

Добрый день! Подскажите Вы решили проблему при помощи javascript?

Добрый день!
Решил на 50%. У нас реализация согласно дизайну должна быть следующая: меню "Категорий" это кнопка, по нажатию на которую выползает перечень категорий, а при нажатии ещё раз заползает обратно. При этом, контент снизу кнопки не смещается.
Решаем так:
1. В своём модуле переопределяем шаблон blocks/categories/categories_dropdown_vertical.tpl
2. Добавляем в самом верху кнопку c id, например "js-catalog-btn"
3. К тегу добавляем ещё один класс, например "catalog--drop"
4. Создаём каталог нашего модуля в каталоге /js/addons/<имя вашего модуля>
5. Создаём там файл, например cat.js следующего содержания:

$(document).ready(function(){
/* каталог*/
$('#js-catalog-btn').on('click', function(){
$(this).toggleClass('open');
$('#js-catalog').slideToggle('400');
$('#js-saidbar').slideUp('250');
if($('.js-fltr-toggler').hasClass('open')){
$('.js-fltr-toggler').toggleClass('open');
}
});
});

6. Подключаем файл в hooks/index/scripts.post.tpl

7. Добавляем стили? что то типо того, зависит от шаблона:

.catalog--drop{
position: absolute;
z-index: 10;
display: none;
width: 14.76%;
}

Как то так. Кнопка работает как надо, но только в десктопной версии, на респонсивный не срабатывает, надо допиливать.

Ещё мы выпилили штатную кнопку из categories_dropdown_vertical.tpl. Думаю она не пригодится, тем более её реализация странная, сама кнопка является первым элементом списка.

В общем, если допилю, напишу решение на 100%

7

По хорошему надо писать свой модуль меню. Но пока ещё к этому не пришли.

8

В общем будем писать свой модуль меню категорий со следующим функционалом:

  1. Меню скрыто. Отображается только кнопка "Категории"
  2. По клику на кнопку будет выезжать меню категорий, сверху элементов вёрстки, не смещая их.
  3. По повторному клику, меню будет заезжать обратно.
  4. Глубина подменю - 2

Как будет готово выложу ссылку на демку,