Сообщений в теме: 11

[Mizou]

Есть ли возможность добавить отображение подобного блока:

<div id="custommenu">
								  <ul class="mainnav">
										{% FOR menu %}
												{% FOR header1 %}
												  {% FOR links %}
														<li class="level0"><a href="{menu.header1.links.URL}" class="title-lv0 {% IF menu.header1.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
												  {% ENDFOR %}
												{% ENDFOR %}
										  {% ENDFOR %}
								  </ul>
								</div>

при клике на какую-либо ссылку (кнопку) из верхнего меню?

[Vaccina]

Для этого необходимо произвести изменения по аналогии со следующей инструкцией:
http://forum.storela...еню/#entry28263

классы и id блоков сохраняйте родные.

[Mizou]

Это не совсем то что нужно или я просто не понимаю.

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

[Юля123]

Mizou (03 Февраль 2016 - 17:30) писал:

Это не совсем то что нужно или я просто не понимаю.

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

Здравствуйте, правильно ли я понимаю, что вам нужно, чтобы при клике на пункт меню (например "Мастер классы"), открывалось еще одно меню, которое бы Вы создали в разделе Сайт - Меню (как верхнее меню, нижнее меню и т.д.)?

[Mizou]

Юля123 (03 Февраль 2016 - 17:46) писал:

Здравствуйте, правильно ли я понимаю, что вам нужно, чтобы при клике на пункт меню (например "Мастер классы"), открывалось еще одно меню, которое бы Вы создали в разделе Сайт - Меню (как верхнее меню, нижнее меню и т.д.)?

Да

[RedHead]

Mizou (03 Февраль 2016 - 17:48) писал:

Да

Здравствуйте. Инструкция из поста #2- это то, что Вам нужно. Ознакомьтесь с ней, пожалуйста, внимательно.

У Вас уже создана одна заготовка для выпадающего меню: в разделе Сайт-->Меню : menu.header1. Сделаем на его примере:

В шаблоне html замените блок кода:

<div id="mainnav" class="col-md-10">
<div id="custommenu">
<ul class="mainnav">
<li class="level0"><a href="http://scrapbusinka.ru/" class="title-lv0 selected" title="Все для скрапбукинга и рукоделия!">Главная</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/news?sid=1" class="title-lv0 " title="Список новостей магазина">Блог</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/catalog" class="title-lv0 " title="Полный список товаров на сайте">Каталог</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/page/MC" class="title-lv0 " title="Расписание мастер-классов">Мастер классы</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/discount" class="title-lv0 " title="Акции, проходящие в магазине">Акции</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/page/Доставка" class="title-lv0 " title="Доставка">Доставка и оплата</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/feedback" class="title-lv0 " title="Связь с администрацией магазина">Контакты</a></li>
<li class="level0"><a href="http://scrapbusinka.ru/user/settings" class="title-lv0 " title="Личный кабинет покупателя, персональные настройки">Личный кабинет</a></li>
</ul>
</div>
<div id="custommenu">
<ul class="mainnav">
{% FOR menu %}
{% FOR header1 %}
{% FOR links %}
<li class="level0"><a href="{menu.header1.links.URL}" class="title-lv0 {% IF menu.header1.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>
</div>

на:

<div id="mainnav" class="col-md-10">
							 <div id="custommenu">
								 <ul class="mainnav">
						 <li class="level0 parent"><a class="title-lv0" href="#" title="На главную">Главная</a>
						 <ul class="sub dropdown-menu">
						 {% FOR menu %}
						 {% FOR header1 %}
						 {% FOR links %}
						 <li class="level1"><a class="title-lv1" href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}><span class="open-menu active"></span>{menu.header1.links.NAME}</a></li>
						 {% ENDFOR %}
						 {% ENDFOR %}
						 {% ENDFOR %}
						 </ul>
						 </li>
								 {% FOR menu %}
								 {% FOR header %}
								 {% FOR links %}
								 <li class="level0"><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
								 {% ENDFOR %}
								 {% ENDFOR %}
								 {% ENDFOR %}
								 </ul>
							 </div>
							 </div>

Таким образом, мы создадим первый пункт меню, из которого будет выпадать новое меню. Вам нужно по аналогии создать все пункты.
После этого можно будет удалить блок кода:

{% FOR menu %}
								 {% FOR header %}
								 {% FOR links %}
								 <li class="level0"><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
								 {% ENDFOR %}
								 {% ENDFOR %}
								 {% ENDFOR %}

который сейчас выводит всё меню.

В main.css замените строку:

#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #ffffff;border-bottom: 3px solid #3cabda;border-top: 1px solid #d5d5d5;z-index: 999;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.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #ffffff;border-bottom: 3px solid #7a9439;border-top: 1px solid #d5d5d5;z-index: 999;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.mainnav li a.title-lv1:hover {color: #3cabda;}

на:

#custommenu ul.mainnav li a.title-lv1:hover {color: #7a9439;}

Результат на моем примере:

[Mizou]

Это тоже вариант, но я имел ввиду другое. Чтобы само выпадающее меню выглядело как верхнее меню, т.е. как на скрине в сообщении #3. Это возможно?

[Vaccina]

Vaccina (03 Февраль 2016 - 01:08) писал:

Для этого необходимо произвести изменения по аналогии со следующей инструкцией:
http://forum.storela...еню/#entry28263
классы и id блоков сохраняйте родные.

тут была инструкция как раз таки для выпадающего горизонтального меню.

Mizou (03 Февраль 2016 - 20:22) писал:

Это тоже вариант, но я имел ввиду другое. Чтобы само выпадающее меню выглядело как верхнее меню, т.е. как на скрине в сообщении #3. Это возможно?

Выполните и сохраните изменения из сообщения #6, логика работы верная, останется только изменить стилистику, основываясь на результате, чтобы привести к желаемому виду.

[Mizou]

Vaccina (04 Февраль 2016 - 01:47) писал:

тут была инструкция как раз таки для выпадающего горизонтального меню.



Выполните и сохраните изменения из сообщения #6, логика работы верная, останется только изменить стилистику, основываясь на результате, чтобы привести к желаемому виду.

Вроде разобрался, но остался вопрос:

Как изменить выделенную область в выпадающем меню до вида верхнего меню, т.е. чтобы у границы были заданые отступы от текста, а то у выпадающего границы почти вдоль текста и размер области для самого длинного текста общий для остальных.

А так же теперь при переходе по ссылка через верхнее меню изменяется стиль, но возвращается к исходному после F5. Как это исправить?

[Юля123]

Mizou (04 Февраль 2016 - 17:13) писал:

Вроде разобрался, но остался вопрос:

Как изменить выделенную область в выпадающем меню до вида верхнего меню, т.е. чтобы у границы были заданые отступы от текста, а то у выпадающего границы почти вдоль текста и размер области для самого длинного текста общий для остальных.

А так же теперь при переходе по ссылка через верхнее меню изменяется стиль, но возвращается к исходному после F5. Как это исправить?

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

1) В main.css найдите код:

#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 100%; width:100%;  left: 0; background: #7a9338 url("http://design.scrapbusinka.ru/breadcrumbs-bg1.jpg") no-repeat center top;z-index: 999;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.mainnav li ul.dropdown-menu {position: absolute;top: 100%;background: #7a9338 url("http://design.scrapbusinka.ru/breadcrumbs-bg1.jpg") no-repeat center top;z-index: 999;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;}

2) описанную проблему не обнаружили, почистите кеш (ctrl+f5) и если не поможет, пришлите, пожалуйста, скриншот на котором видно как изменяется стиль.

[Mizou]

Юля123 (04 Февраль 2016 - 17:31) писал:

и замените на код:

Я имел ввиду расстояние между border и текстом, т.е чтобы это расстояние было как в верхнем меню.

[Firefly]

Mizou (04 Февраль 2016 - 17:56) писал:

Я имел ввиду расстояние между border и текстом, т.е чтобы это расстояние было как в верхнем меню.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

#custommenu ul.mainnav li a.title-lv1 {color: #FFF;  background: none;  padding: 0px;margin-left: auto;margin-right: auto;width: 15em;}

Замените на:

#custommenu ul.mainnav li a.title-lv1 {color: #FFF;  background: none;padding: 8px 10px;margin-left: auto;margin-right: auto;width: 15em;}