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


Изменение Меню Товаров В Шапке

каталог товаров шапка список товаров

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

#1 Ash74

Ash74

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

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородЧелябинск

Отправлено 17 Июнь 2016 - 09:00

Добрый день!

Аккаунт № SL-259633

Нужно внести изменения в шапку сайта. А именно - изменить выпадающее меню со списком товарных категорий. Сейчас оно открывается при наведении полностью, т.е. отображаются все товарные группы и подкатегории. Нужно сделать, чтобы отображалась только та категория, на которую пользователь навел курсор. На скринах показано, как всё должно выглядеть в итоге.

Надеюсь на Вашу помощь в решении вопроса =)))

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

  • Как есть сейчас.jpg
  • Как надо.jpg


#2 Ирина345

Ирина345

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

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

Отправлено 17 Июнь 2016 - 16:00

Просмотр сообщенияAsh74 (17 Июнь 2016 - 09:00) писал:

Добрый день!

Аккаунт № SL-259633

Нужно внести изменения в шапку сайта. А именно - изменить выпадающее меню со списком товарных категорий. Сейчас оно открывается при наведении полностью, т.е. отображаются все товарные группы и подкатегории. Нужно сделать, чтобы отображалась только та категория, на которую пользователь навел курсор. На скринах показано, как всё должно выглядеть в итоге.

Надеюсь на Вашу помощь в решении вопроса =)))
Здравствуйте,
найдите в шаблоне HTML
  <div id="custommenu" class="col-xs-12">
			<!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} -->
			{% IFNOT catalog_full_empty %}
			<ul class="mainnav">
			  {%IFNOT catalog_full_empty%}
				{%FOR catalog_full%}
				  {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}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 %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></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%}
			  {%ENDIF%}
			</ul>
замените на
  <div id="custommenu" class="col-xs-12">
			<!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} -->
			{% IFNOT catalog_full_empty %}
			<ul class="mainnav">
			{% 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>

далее найдите в файле main.css
/*** Левая часть ***/
.col-left .block {margin-bottom: 30px;}
.col-left .block:last-child {margin-bottom: 0;}
.block .content {border: 1px solid #e2dfdf;box-shadow: 0 0 0 1px #ffffff inset;padding: 0 15px 10px;margin: 0;}
/** Каталог **/

после вставьте
#custommenu {
padding: 0;
margin: 0;
font-size: 100%;
font-family: Georgia;
}
#custommenu li {
list-style: none;
	 display: inline-block;
padding: 0;
margin: 0;
text-align: center;
  
position: relative;
padding-top: 12px;
}
#custommenu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;

z-index: 99;
}
#custommenu li ul li ul {
   margin-left:185px;top:0;
}
#custommenu li ul li {

margin: 0;
width: 185px;
text-align: center;
	background: #fafafa;
}
#custommenu li ul li a {
display: block;
color: #fff;
	 display: block;
	font-size: 18px;
	color: #000;
	margin: 8px 0 10px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #e2dfdf;
	font-family: "agency", 'PT Sans Narrow', sans-serif;
	text-transform: uppercase;
text-decoration: none;
}
#custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul {
display: block;
}

далее найдите
#custommenu .mainnav {position: static;margin: 0;overflow: hidden;}
замените на
#custommenu .mainnav {position: static;margin: 0;}


#3 Ash74

Ash74

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

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородЧелябинск

Отправлено 17 Июнь 2016 - 19:09

Сделал всё, как сказали. Вот что получилось в итоге...

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

  • Меню1.jpg
  • Меню2.jpg


#4 Vaccina

Vaccina

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

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

Отправлено 18 Июнь 2016 - 06:26

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

Если исходить из инструкции выше, то после изменений попробуйте следующие блоки:
#custommenu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
z-index: 99;
}
#custommenu li ul li {
margin: 0;
width: 185px;
text-align: center;
		background: #fafafa;
}

замените на:
#custommenu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 320px;
display: none;
position: absolute;
z-index: 99;
}
#custommenu li ul li {
margin: 0;
width: 320px;
text-align: center;
background: #fafafa;
}


#5 Ash74

Ash74

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

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородЧелябинск

Отправлено 23 Июнь 2016 - 21:23

Спасибо!

На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.

Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.

Жду ответа!

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

  • Выпадающее меню каталога.jpg


#6 Danil

Danil

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

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

Отправлено 24 Июнь 2016 - 10:25

Просмотр сообщенияAsh74 (23 Июнь 2016 - 21:23) писал:

Спасибо!

На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.

Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.

Жду ответа!
Здравствуйте.
В main.css найдите код
#custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul {
	display: block;
}
и замените на
#custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul {
	display: block;
	border: 1px solid #F00;
	width: 187px;
}
1px - толщина рамки
#F00 - цвет рамки

#7 Ash74

Ash74

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

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородЧелябинск

Отправлено 24 Июнь 2016 - 21:50

Спасибо!





Темы с аналогичным тегами каталог товаров, шапка, список товаров

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

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