0
Выпадающее Меню Категорий Как При Нажатии На Кнопку Каталога
Автор veilofmaya1234, 10 июня 2020 02:12
Сообщений в теме: 8
#1
Отправлено 10 Июнь 2020 - 02:12
Добрый день, подскажите пожалуйста сложно ли будет сделать для блока категорий товаров слева (где указано кол-во товара)
сделать так же выпадающее меню для категорий 2-го уровня? при наведении.
Как при нажатии на кнопку каталога товаров (там категории 2го уровня выпадающим окном)
сделать так же выпадающее меню для категорий 2-го уровня? при наведении.
Как при нажатии на кнопку каталога товаров (там категории 2го уровня выпадающим окном)
#2
Отправлено 10 Июнь 2020 - 10:08
veilofmaya1234 (10 Июнь 2020 - 02:12) писал:
Добрый день, подскажите пожалуйста сложно ли будет сделать для блока категорий товаров слева (где указано кол-во товара)
сделать так же выпадающее меню для категорий 2-го уровня? при наведении.
Как при нажатии на кнопку каталога товаров (там категории 2го уровня выпадающим окном)
сделать так же выпадающее меню для категорий 2-го уровня? при наведении.
Как при нажатии на кнопку каталога товаров (там категории 2го уровня выпадающим окном)
Добрый день!
Вам нужно перейти в раздел сайт > редактор шаблонов > HTML
Найдите этот код
<!-- Каталог --> {% IFNOT catalog_full_empty %} <div class="block catalog"> <h3 class="title"><a href="{CATALOG_URL}"><span class="text">Каталог</span></a></h3> <div class="content"> <ul> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}" title="{catalog_full.NAME}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}> {% IF catalog_full.IMAGE_ICON %}<img src="{catalog_full.IMAGE_ICON}" class="goods-cat-image-icon"/>{% ENDIF %}{% IF catalog_full.ISSET_VISIBLE_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %} {catalog_full.NAME} {% IF catalog_full.GOODS_COUNT>0 %} <span class="count">{catalog_full.GOODS_COUNT}</span>{% ELSEIF catalog_full.BRANCH_GOODS_COUNT>0 %}<span class="count">{catalog_full.BRANCH_GOODS_COUNT}</span>{% ENDIF %} </a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} <!-- Отображение количества товаров в категории --> {% ENDFOR %} </ul> </div> </div> {% ENDIF %} <!-- /END Каталог -->
И замените его этим
<!--Выпадающий каталог товаров --> <div class="menu_main"> <a href="{CATALOG_URL}" title="Каталог" style="text-decoration: none"><h4 class="hidden-phone">Каталог</h4></a> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}{% IF catalog_full.HIDE %} style="display:none;"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </div> <!--Выпадающий каталог товаров -->
Далее откройте раздел main.css и в самый конец шаблона добавьте этот код
/* Выпадающий каталог */ .menu_main ul {padding-left: 10px;} .menu_main li {list-style: none;margin: 10px 0;} .menu_main li a {font-size: 16px;} .menu_main ul li ul {display: none;position: absolute;top: 0;z-index: 1;left: 65%;width: 100%;min-height: 100%;background-color: #fff;padding: 0;border: 1px solid #f1f1f1;border-left-style: none;} .menu_main ul li ul li {border-bottom: 1px solid #e4e4e4;padding: 10px;} .menu_main ul li ul li:hover {border-bottom: 1px solid #55188f;} .menu_main ul li:hover ul {display: block;}
Сообщение отредактировал M1STERE0: 11 Июнь 2020 - 10:13
Обновление инструкции
#3
Отправлено 10 Июнь 2020 - 15:15
M1STERE0 (10 Июнь 2020 - 10:08) писал:
Добрый день!
Данный функционал присутствует в шаблоне Техно. Для его активации нужно перейти в раздел Товары > Товары > Каталог товаров на сайте > Название категории.
Далее нажать правой кнопкой мыши > создать подкатегорию
01.png
В итоге получается следующее
12.png
Теперь если перейти на сайт, то можно увидеть следующее отображение
23.png
Данный функционал присутствует в шаблоне Техно. Для его активации нужно перейти в раздел Товары > Товары > Каталог товаров на сайте > Название категории.
Далее нажать правой кнопкой мыши > создать подкатегорию
01.png
В итоге получается следующее
12.png
Теперь если перейти на сайт, то можно увидеть следующее отображение
23.png
К примеру при нажатии на кнопку "Каталог товаров" из меню - оно именно вправо выпадает.
Очень нужно, чтоб в блоке категорий так же было, так как я считаю, что выпадание вниз очень неудобно, если много категорий и подкатегорий
#4
Отправлено 10 Июнь 2020 - 19:08
подскажите пожалуйста
#6
Отправлено 11 Июнь 2020 - 20:07
M1STERE0 (11 Июнь 2020 - 10:14) писал:
Добрый день!
Инструкцию обновили
Инструкцию обновили
Только жаль анимацию не сделать, типа задержку появления, не красиво так выглядит(
вот здесь ваще круто сделано
https://optome.ru/ca...896047598548692
#7
Отправлено 11 Июнь 2020 - 20:49
и еще бы иконку стрелочки
#8
Отправлено 12 Июнь 2020 - 00:55
стрелки сделал, осталось задержку transition для выпадающего меню сделать, только не знаю где ее вставить
#9
Отправлено 02 Июль 2020 - 00:05
Здравствуйте.
Укажите пожалуйста номер аккаунта вашего магазина и добавьте его в профиль форума.
Укажите пожалуйста номер аккаунта вашего магазина и добавьте его в профиль форума.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных