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


Выпадающее Меню Категорий Как При Нажатии На Кнопку Каталога


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 10 Июнь 2020 - 02:12

Добрый день, подскажите пожалуйста сложно ли будет сделать для блока категорий товаров слева (где указано кол-во товара)
сделать так же выпадающее меню для категорий 2-го уровня? при наведении.
Как при нажатии на кнопку каталога товаров (там категории 2го уровня выпадающим окном)

#2 M1STERE0

M1STERE0

    Продвинутый пользователь

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

Отправлено 10 Июнь 2020 - 10:08

Просмотр сообщенияveilofmaya1234 (10 Июнь 2020 - 02:12) писал:

Добрый день, подскажите пожалуйста сложно ли будет сделать для блока категорий товаров слева (где указано кол-во товара)
сделать так же выпадающее меню для категорий 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 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 10 Июнь 2020 - 15:15

Просмотр сообщенияM1STERE0 (10 Июнь 2020 - 10:08) писал:

Добрый день!

Данный функционал присутствует в шаблоне Техно. Для его активации нужно перейти в раздел Товары > Товары > Каталог товаров на сайте > Название категории.

Далее нажать правой кнопкой мыши > создать подкатегорию

Прикрепленный файл 01.png

В итоге получается следующее

Прикрепленный файл 12.png

Теперь если перейти на сайт, то можно увидеть следующее отображение

Прикрепленный файл 23.png
Да, оно выпадает вниз, а мой вопрос как сделать так, что бы вбок выпадало вот таким образом
Изображение

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

#4 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 10 Июнь 2020 - 19:08

подскажите пожалуйста

#5 M1STERE0

M1STERE0

    Продвинутый пользователь

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

Отправлено 11 Июнь 2020 - 10:14

Просмотр сообщенияveilofmaya1234 (10 Июнь 2020 - 19:08) писал:

подскажите пожалуйста

Добрый день!
Инструкцию обновили

#6 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 11 Июнь 2020 - 20:07

Просмотр сообщенияM1STERE0 (11 Июнь 2020 - 10:14) писал:

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

вот здесь ваще круто сделано
https://optome.ru/ca...896047598548692

#7 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 11 Июнь 2020 - 20:49

и еще бы иконку стрелочки

#8 veilofmaya1234

veilofmaya1234

    Пользователь

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

Отправлено 12 Июнь 2020 - 00:55

стрелки сделал, осталось задержку transition для выпадающего меню сделать, только не знаю где ее вставить

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Июль 2020 - 00:05

Здравствуйте.

Укажите пожалуйста номер аккаунта вашего магазина и добавьте его в профиль форума.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных