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


Каталог Автоматически Разворачивается

каталог развернуть автоматически

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

#1 kirussian

kirussian

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

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

Отправлено 12 Март 2017 - 17:26

Добрый день!

Подскажите, как сделать чтобы каталог в верхнем меню автоматически разворачивался.
Мой аккаунт SL-408620

Нужно сделать так:
1. На любой странице пользователь при подведении мышки на кнопку меню Каталог получал автоматический разворот каталога до первого уровня (скрин 1).
2. При подведении мышки пользователем на первый уровень каталога (например, перчатки), уже разворачивается второй уровень. Например, боксерские перчатки, и перчатки мма (скрин 2)

Прикрепленные изображения

  • Screenshot2.png
  • Screenshot1.png


#2 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 17 Март 2017 - 15:07

Просмотр сообщенияkirussian (12 Март 2017 - 17:26) писал:

Добрый день!

Подскажите, как сделать чтобы каталог в верхнем меню автоматически разворачивался.
Мой аккаунт SL-408620

Нужно сделать так:
1. На любой странице пользователь при подведении мышки на кнопку меню Каталог получал автоматический разворот каталога до первого уровня (скрин 1).
2. При подведении мышки пользователем на первый уровень каталога (например, перчатки), уже разворачивается второй уровень. Например, боксерские перчатки, и перчатки мма (скрин 2)
Здравствуйте. Простите за длительное ожидание ответа.
Вам необходимо в шаблоне HTML найти блок
<!-- Меню в шапке -->
<ul class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
и заменить его на
<!-- Меню в шапке -->
<ul class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<li class="parent"><a href="/catalog" {% IF PAGE_NAME = Каталог %}class="active"{%ENDIF%} itemprop="url">Каталог</a>
<ul class="dropdown-menu">
{% FOR catalog_full %}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 1 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" itemprop="url">{catalog_full.NAME}</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 %}

</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
Далее в файле main.css найдите строку
#custommenu ul.menunav li > a.active {border-bottom: 2px solid #09afe7;}
и сразу после нее вставьте блок
#custommenu ul.menunav li{float:none;}
#custommenu ul.menunav li ul.dropdown-menu li> a{border-bottom:1px solid #09afe7;}
#custommenu ul.menunav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #333744;z-index: 999;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu {display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li{vertical-align:top;}
#custommenu ul.menunav li ul.dropdown-menu li ul.sub.dropdown-menu {display: none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li:hover .sub{display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;position: relative;padding: 0;box-shadow:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub li{display:block;float:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub li a{border:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub.hide-cat{display:none;}

Так же Вам необходимо  в разделе Сайт-> Меню удалить пункт меню Каталог.

#3 kirussian

kirussian

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

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

Отправлено 17 Март 2017 - 21:36

Просмотр сообщенияStasya (17 Март 2017 - 15:07) писал:

Здравствуйте. Простите за длительное ожидание ответа.
Вам необходимо в шаблоне HTML найти блок
<!-- Меню в шапке -->
<ul class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
и заменить его на
<!-- Меню в шапке -->
<ul class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<li class="parent"><a href="http://stasyashop.ru/catalog" {% IF PAGE_NAME = Каталог %}class="active"{%ENDIF%} itemprop="url">Каталог</a>
<ul class="dropdown-menu">
{% FOR catalog_full %}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 1 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" itemprop="url">{catalog_full.NAME}</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 %}

</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
Далее в файле main.css найдите строку
#custommenu ul.menunav li > a.active {border-bottom: 2px solid #09afe7;}
и сразу после нее вставьте блок
#custommenu ul.menunav li{float:none;}
#custommenu ul.menunav li ul.dropdown-menu li> a{border-bottom:1px solid #09afe7;}
#custommenu ul.menunav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #333744;z-index: 999;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu {display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li{vertical-align:top;}
#custommenu ul.menunav li ul.dropdown-menu li ul.sub.dropdown-menu {display: none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li:hover .sub{display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;position: relative;padding: 0;box-shadow:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub li{display:block;float:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub li a{border:none;}
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li .sub.hide-cat{display:none;}

Так же Вам необходимо  в разделе Сайт-> Меню удалить пункт меню Каталог.

Все отлично. Осталось небольшую поправку сделать: каталог разворачивается, но туда попадают скрытые категории. Например, перчатки - детские (скрин)

Прикрепленные изображения

  • Screenshot_5.png


#4 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 19 Март 2017 - 20:13

Просмотр сообщенияkirussian (17 Март 2017 - 21:36) писал:

Все отлично. Осталось небольшую поправку сделать: каталог разворачивается, но туда попадают скрытые категории. Например, перчатки - детские (скрин)
Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.

#5 kirussian

kirussian

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

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

Отправлено 21 Март 2017 - 08:19

Здравствуйте! все отлично, спасибо.

#6 kirussian

kirussian

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

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

Отправлено 23 Март 2017 - 23:58

ТОВАРИЩИ! Что случилось с моим сайтом? кто-то сделал авто-переход на чужой магазин.
Описание проблемы: Нажимаем на меню "КАТАЛОГ" и нас перебрасывает на совершенно другой магазин

Прикрепленные изображения

  • Screenshot_2.png
  • Screenshot_1.png


#7 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 24 Март 2017 - 10:11

Просмотр сообщенияkirussian (23 Март 2017 - 23:58) писал:

ТОВАРИЩИ! Что случилось с моим сайтом? кто-то сделал авто-переход на чужой магазин.
Описание проблемы: Нажимаем на меню "КАТАЛОГ" и нас перебрасывает на совершенно другой магазин
Здравствуйте. Приношу свои извинения, забыла поставить Вашу ссылку в код. Внесла Вам изменения на сайт. Проверьте, пожалуйста.

#8 kirussian

kirussian

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

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

Отправлено 24 Март 2017 - 10:13

Спасибо за оперативную помощь!

#9 Mari-ina

Mari-ina

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

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

Отправлено 18 Сентябрь 2017 - 15:52

Здравствуйте. А мне подскажите как убрать скрытые категории из верхнего меню

#10 Mari-ina

Mari-ina

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

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

Отправлено 18 Сентябрь 2017 - 16:06

И второй вопрос, можно ли разделить выпадающую колонку на два столбика.  ак 299810

#11 Mari-ina

Mari-ina

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

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

Отправлено 19 Сентябрь 2017 - 07:57

И третий вопрос, так как убрала каталог из верхнего меню, он пропал из мобильной версии. Как вернуть каталог в мобильную версию?

#12 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 19 Сентябрь 2017 - 15:58

Просмотр сообщенияMari-ina (18 Сентябрь 2017 - 15:52) писал:

Здравствуйте. А мне подскажите как убрать скрытые категории из верхнего меню
Здравствуйте, найдите в шаблоне HTML код
<ul class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<li class="parent"><a href="/catalog" {% IF PAGE_NAME = Каталог %}class="active"{%ENDIF%} itemprop="url">Каталог</a>
<ul class="dropdown-menu">
{% FOR catalog_full %}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 1 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" itemprop="url">{catalog_full.NAME}</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 class="menunav" itemscope itemtype="http://schema.org/SiteNavigationElement">
<li class="parent"><a href="/catalog" {% IF PAGE_NAME = Каталог %}class="active"{%ENDIF%} itemprop="url">Каталог</a>
<ul class="dropdown-menu">
{% FOR catalog_full %}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 1 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %}class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" itemprop="url">{catalog_full.NAME}</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 %}

Просмотр сообщенияMari-ina (18 Сентябрь 2017 - 16:06) писал:

И второй вопрос, можно ли разделить выпадающую колонку на два столбика.  ак 299810
Укажите на скриншоте, что именно Вы хотите реализовать.

Просмотр сообщенияMari-ina (19 Сентябрь 2017 - 07:57) писал:

И третий вопрос, так как убрала каталог из верхнего меню, он пропал из мобильной версии. Как вернуть каталог в мобильную версию?

Добавьте в разделе Сайт-Меню пункт - Каталог, далее найдите в шаблоне HTML код
</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>

замените на
</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {%IF menu.header.links.NAME=Каталог%}class="ad_catalog"{%ENDIF%}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>

далее найдите в файле main.css код
@media all and (max-width: 991px) {

замените на
.ad_catalog {display:none;}
@media all and (max-width: 991px) {
.ad_catalog {display:block;}


#13 Mari-ina

Mari-ina

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

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

Отправлено 20 Сентябрь 2017 - 08:13

Здравствуйте. К сожалению, по третьему вопросу ничего не получилось, так и остался сдвоенный каталог на большом экране. Поэтому эту часть кода пока делать не стала.

Просмотр сообщенияИрина345 (19 Сентябрь 2017 - 15:58) писал:


Добавьте в разделе Сайт-Меню пункт - Каталог, далее найдите в шаблоне HTML код
</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>

замените на
</li>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {%IF menu.header.links.NAME=Каталог%}class="ad_catalog"{%ENDIF%}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>




#14 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 20 Сентябрь 2017 - 17:06

Просмотр сообщенияMari-ina (20 Сентябрь 2017 - 08:13) писал:

Здравствуйте. К сожалению, по третьему вопросу ничего не получилось, так и остался сдвоенный каталог на большом экране. Поэтому эту часть кода пока делать не стала.
Здравствуйте.
Вернул Вам стандартный каталог для моб. версии, проверьте, пожалуйста.

#15 Mari-ina

Mari-ina

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

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

Отправлено 21 Сентябрь 2017 - 08:32

Просмотр сообщенияDanil (20 Сентябрь 2017 - 17:06) писал:

Здравствуйте.
Вернул Вам стандартный каталог для моб. версии, проверьте, пожалуйста.

Спасибо. Подскажите еще, как сделать в горизонтальном меню в первой категории два столбика подкатегорий, так как список довольно большой и на маленьком экране неудобно выбирать нижние подкатегории.
И второй момент, на расширении 1024 каталог в верхнем меню не правильно срабатывает, выбрать подкатегорию невозможно, просто сразу перебрасывает в общий каталог

Прикрепленные изображения

  • 2.png


#16 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 21 Сентябрь 2017 - 11:01

Просмотр сообщенияMari-ina (21 Сентябрь 2017 - 08:32) писал:

Спасибо. Подскажите еще, как сделать в горизонтальном меню в первой категории два столбика подкатегорий, так как список довольно большой и на маленьком экране неудобно выбирать нижние подкатегории.
И второй момент, на расширении 1024 каталог в верхнем меню не правильно срабатывает, выбрать подкатегорию невозможно, просто сразу перебрасывает в общий каталог
Здравствуйте, что бы под категории расположить 2 строки, необходимо зафиксировать высоту выпадающего меню.
если такой вариант подходит, то найдите в файле main.css код
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li:hover .sub{display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;position: relative;padding: 0;box-shadow:none;}

замените на
#custommenu ul.menunav li.parent:hover ul.dropdown-menu li:hover .sub {
	/* display: block; */
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	margin-left: 15px;
	overflow: inherit;
	visibility: visible;
	height: 200px;
	opacity: 1;
	filter: alpha(opacity=100);
	-khtml-opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	transform-origin: top center;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
	position: relative;
	padding: 0;
	box-shadow: none;
}
При расширение 1024 проблем не наблюдаю.

#17 Mari-ina

Mari-ina

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

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

Отправлено 26 Сентябрь 2017 - 09:46

Здравствуйте. Подскажите, как сделать боковой каталог выпадающим. На примере добрострой.рф

#18 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 26 Сентябрь 2017 - 10:28

Просмотр сообщенияMari-ina (26 Сентябрь 2017 - 09:46) писал:

Здравствуйте. Подскажите, как сделать боковой каталог выпадающим. На примере добрострой.рф

Здравствуйте.
Изменения Вам произвел.
В шаблоне main.css код:
/* Меню, Каталог */
.block-menu-content {float: left;width: 100%;font-size:110%;}
.block-menu-content ul li {line-height: 26px;}
.block-menu-content ul li i {width: 16px;margin-right: 10px;}
.block-menu-content ul li.parent.subhead:before {padding-right: 20px;}
.block-menu-content ul li.subhead {text-align: left;border-bottom: 1px solid #505050;font-weight: normal;text-transform: capitalize;padding: 4px 0;}
.block-menu-content ul li.parent.subhead {padding-left:0;}
.block-menu-content ul.sub {padding-left:15px;display: none;}
.block-menu-content ul li.active > ul.sub {display: block;}
.block-menu-content ul li a.active {color: #F39641;}
.block-menu-content ul li .open-sub {float: right;right: 15px;padding: 0 10px;margin-right: -5px;}
.block-menu-content ul li .open-sub:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
.block-menu-content ul li.active .open-sub.active:before {content: "\f068";color: #707070;}

Заменил на:
/* Меню, Каталог */
.block-menu-content ul li {position: relative;padding: 0;}
.block-menu-content li a {display: block;line-height: 40px;margin: 0;padding: 0 0 0 0;font-weight: 400;letter-spacing: 0.3px;text-align: left;}
.block-menu-content li.level1 a {color:#fff;padding:0 5px;}
.block-menu-content li.level1 a:hover{color:#212C50;background-color:#d1f1fd;}
.block-menu-content li.level1 a:hover{color:#212C50;}
.block-menu-content ul li.parent.subhead:before {padding-right: 20px;}
.block-menu-content ul li.parent.subhead {padding-left:0;}
.menu .block-menu-content{margin-bottom:10px;}
.level1 a{font-size:14px;font-family:'Raleway Regular';}
.block-menu-content .anch0{font-size:20px;font-family:'Raleway Regular';position:relative;}
.block-menu-content .anch0:after{content:' ';height:3px;width:100%;display:block;background: #3CA2B0;}
.block-menu-content ul li a.active, .block-menu-content ul li a:hover {}
.block-menu-content ul li .open-sub {float: right;right: 0px;position: absolute;padding: 0 0px 0 0;}
.block-menu-content ul li .open-sub:before {content: "\f105";font-family: 'FontAwesome';}
.parent.level0{position:relative;}
.parent.level0 ul.sub3{display:none;position:absolute;left:100%;top:-5px;padding:5px 7px 7px 5px;background:#3CA2B0;min-width:250px;z-index:10000;}
.parent.level0 ul.sub2{display:none;position:absolute;left:100%;top:-5px;padding:5px 7px 7px 5px;background:#3CA2B0;min-width:250px;z-index:10000;}
.parent.level0 ul.sub1{display:none;position:absolute;left:100%;top:0;padding:5px 7px 7px 5px;background:#3CA2B0;width:250px;z-index:10000;border-left:3px solid white;}
.parent.level0 ul.sub1 a{max-width:233px;display:block;overflow:hidden;}
.parent.level0 ul.sub1 a,.parent.level1 ul.sub2 a,.parent.level2 ul.sub3 a{font-size:14px;line-height:40px;}
.parent.level0:hover ul.sub1,.parent.level1:hover ul.sub2,.parent.level2:hover ul.sub3,.parent.level3:hover ul.sub4{display:block;}
.block-menu-content ul.sub0{display:block;}
.block-menu-content ul.sub1{display:none;}
.block-menu-content ul.sub2{display:none;}

Код в шаблоне HTML:
			 <div class="block-menu-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_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</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 class="block-menu-content">
				 <ul>
				 {% FOR catalog_full %}
					 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub sub{catalog_full.LEVEL}">{% ENDIF %}{% ENDIF %}
					 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} level{catalog_full.LEVEL} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						 <a {% IFNOT catalog_full.CURRENT %}href="{catalog_full.URL}"{% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ENDIF %} anch{catalog_full.LEVEL}">{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</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>

Проверьте результат.

Прикрепленные изображения

  • Screenshot.png


#19 Mari-ina

Mari-ina

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

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

Отправлено 27 Сентябрь 2017 - 10:51

Просмотр сообщенияFirefly (26 Сентябрь 2017 - 10:28) писал:

Здравствуйте.
Изменения Вам произвел.
В шаблоне main.css код:
/* Меню, Каталог */
.block-menu-content {float: left;width: 100%;font-size:110%;}
.block-menu-content ul li {line-height: 26px;}
.block-menu-content ul li i {width: 16px;margin-right: 10px;}
.block-menu-content ul li.parent.subhead:before {padding-right: 20px;}
.block-menu-content ul li.subhead {text-align: left;border-bottom: 1px solid #505050;font-weight: normal;text-transform: capitalize;padding: 4px 0;}
.block-menu-content ul li.parent.subhead {padding-left:0;}
.block-menu-content ul.sub {padding-left:15px;display: none;}
.block-menu-content ul li.active > ul.sub {display: block;}
.block-menu-content ul li a.active {color: #F39641;}
.block-menu-content ul li .open-sub {float: right;right: 15px;padding: 0 10px;margin-right: -5px;}
.block-menu-content ul li .open-sub:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
.block-menu-content ul li.active .open-sub.active:before {content: "\f068";color: #707070;}

Заменил на:
/* Меню, Каталог */
.block-menu-content ul li {position: relative;padding: 0;}
.block-menu-content li a {display: block;line-height: 40px;margin: 0;padding: 0 0 0 0;font-weight: 400;letter-spacing: 0.3px;text-align: left;}
.block-menu-content li.level1 a {color:#fff;padding:0 5px;}
.block-menu-content li.level1 a:hover{color:#212C50;background-color:#d1f1fd;}
.block-menu-content li.level1 a:hover{color:#212C50;}
.block-menu-content ul li.parent.subhead:before {padding-right: 20px;}
.block-menu-content ul li.parent.subhead {padding-left:0;}
.menu .block-menu-content{margin-bottom:10px;}
.level1 a{font-size:14px;font-family:'Raleway Regular';}
.block-menu-content .anch0{font-size:20px;font-family:'Raleway Regular';position:relative;}
.block-menu-content .anch0:after{content:' ';height:3px;width:100%;display:block;background: #3CA2B0;}
.block-menu-content ul li a.active, .block-menu-content ul li a:hover {}
.block-menu-content ul li .open-sub {float: right;right: 0px;position: absolute;padding: 0 0px 0 0;}
.block-menu-content ul li .open-sub:before {content: "\f105";font-family: 'FontAwesome';}
.parent.level0{position:relative;}
.parent.level0 ul.sub3{display:none;position:absolute;left:100%;top:-5px;padding:5px 7px 7px 5px;background:#3CA2B0;min-width:250px;z-index:10000;}
.parent.level0 ul.sub2{display:none;position:absolute;left:100%;top:-5px;padding:5px 7px 7px 5px;background:#3CA2B0;min-width:250px;z-index:10000;}
.parent.level0 ul.sub1{display:none;position:absolute;left:100%;top:0;padding:5px 7px 7px 5px;background:#3CA2B0;width:250px;z-index:10000;border-left:3px solid white;}
.parent.level0 ul.sub1 a{max-width:233px;display:block;overflow:hidden;}
.parent.level0 ul.sub1 a,.parent.level1 ul.sub2 a,.parent.level2 ul.sub3 a{font-size:14px;line-height:40px;}
.parent.level0:hover ul.sub1,.parent.level1:hover ul.sub2,.parent.level2:hover ul.sub3,.parent.level3:hover ul.sub4{display:block;}
.block-menu-content ul.sub0{display:block;}
.block-menu-content ul.sub1{display:none;}
.block-menu-content ul.sub2{display:none;}

Код в шаблоне HTML:
			 <div class="block-menu-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_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</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 class="block-menu-content">
				 <ul>
				 {% FOR catalog_full %}
					 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub sub{catalog_full.LEVEL}">{% ENDIF %}{% ENDIF %}
					 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} level{catalog_full.LEVEL} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						 <a {% IFNOT catalog_full.CURRENT %}href="{catalog_full.URL}"{% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ENDIF %} anch{catalog_full.LEVEL}">{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</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>

Проверьте результат.

Спасибо, а на ак 299810 можно сделать также

#20 Mari-ina

Mari-ina

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

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

Отправлено 29 Сентябрь 2017 - 09:04

ап





Темы с аналогичным тегами каталог, развернуть, автоматически

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

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