Отключен JavaScript

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

Как Сделать Стрелочку В Каталоге Товаров?

Автор Dmitriy73, 11 сент. 2016 17:15

подкатегория каталог подкатегории товаров

Авторизуйтесь для ответа в теме

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

#1 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 11 Сентябрь 2016 - 17:15

Как сделать стрелочку в каталоге товаров как примерно показано на рисунке?
Чтобы было интуитивно для покупателя когда подкатегория открыта и закрыта, надо чтобы: один раз нажал - подкатегории открылись, еще один раз нажал - подкатегории закрылись и стрелочка при этом переворачивалась. Как так сделать?

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

Наверх

#2 Ирина345

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

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

Отправлено 13 Сентябрь 2016 - 17:21

Dmitriy73 (11 Сентябрь 2016 - 17:15) писал:

Здравствуйте, извините за долгий ответ.
Найдите в шаблоне HTML

<!-- Каталог -->
			  <div class="section" style="margin-top: 0px;">
		  <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			  <ul id="subNavigation">
			{%IFNOT catalog_empty %}
				  {% FOR catalog %}
					{% IFNOT catalog.HIDE %}
					  <li>
						<a href="{catalog.URL}"
						  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						>{catalog.NAME}</a>
					  </li>
					{% ENDIF %}
				  {% ENDFOR %}
				{% ENDIF %}
		  </ul>
			  </div>
		  <!-- end Каталог -->

замените на

<!-- Каталог -->
			  <div class="section" style="margin-top: 0px;">
		  <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
						   <div class="box-content">
				<div class="box-category">
				  {%FOR catalog_full%}
					{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
					<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
					  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>{% IF catalog_full.ISSET_SUB %}<em class="open-close">&nbsp;</em>{% ENDIF %}
					{% 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%}
				</div>
			  </div>
			  </div>
		  <!-- end Каталог -->

далее в конец файла main.js добавьте

$(document).ready(function() {
										  $('.parent .open-close').click(function(){
		if ($(this).hasClass('active')) {
		 $(this).parent().children('.accordion').slideUp('slow');
		  $(this).removeClass('active');
		
		} else {
		  $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
		}
										  });
										  });

далее в конец файла main.css добавьте

.accordion .accordion{display:none;}
.accordion {
  width: 170px;	position: relative;
}
.accordion li {
  font-size: 1.0833em;
  line-height: 1.5384em;
  padding: 0.5em 0;
  background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
  padding-left: 10px;
  color: #666;
  display: block;
}
.accordion li a:hover,
.accordion li a:active {
  background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
  color: #D0431D;
  text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
	transition: all 0.35s ease;
	-webkit-transition: all 0.35s ease;
	padding: 2px;
	width: 2px;
	height: 2px;
	position: absolute;
	right: -9px;
	margin-top: -14px;
	border-bottom: 4px solid #666;
	border-right: 4px solid #666;
	transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	cursor: pointer;
}
.open-close.active {
	padding: 2px;
	width: 2px;
	height: 2px;
	position: absolute;
	border-bottom: 4px solid #666;
	border-right: 4px solid #666;
	transform: rotateZ(225deg);
	-o-transform: rotateZ(225deg);
	-webkit-transform: rotateZ(225deg);
	-moz-transform: rotateZ(225deg);
}

Наверх

#3 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

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

Ирина345 (13 Сентябрь 2016 - 17:21) писал:

Здравствуйте, извините за долгий ответ.
Найдите в шаблоне HTML

<!-- Каталог -->
			 <div class="section" style="margin-top: 0px;">
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
			 </div>
		 <!-- end Каталог -->

замените на

<!-- Каталог -->
			 <div class="section" style="margin-top: 0px;">
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
						 <div class="box-content">
			 <div class="box-category">
				 {%FOR catalog_full%}
				 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
				 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
					 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>{% IF catalog_full.ISSET_SUB %}<em class="open-close">&nbsp;</em>{% ENDIF %}
				 {% 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%}
			 </div>
			 </div>
			 </div>
		 <!-- end Каталог -->

далее в конец файла main.js добавьте

$(document).ready(function() {
										 $('.parent .open-close').click(function(){
	 if ($(this).hasClass('active')) {
		 $(this).parent().children('.accordion').slideUp('slow');
		 $(this).removeClass('active');
		
	 } else {
		 $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
	 }
										 });
										 });

далее в конец файла main.css добавьте

.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(225deg);
-o-transform: rotateZ(225deg);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
}

Вот итог, вы понимаете что я не так имел ввиду? я имел ввиду чтобы подкаткгория открывалась и закрывалась, как так сделать?

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

Наверх

#4 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

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

Ирина345 (13 Сентябрь 2016 - 17:21) писал:

Здравствуйте, извините за долгий ответ.
Найдите в шаблоне HTML

<!-- Каталог -->
			 <div class="section" style="margin-top: 0px;">
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
			 </div>
		 <!-- end Каталог -->

замените на

<!-- Каталог -->
			 <div class="section" style="margin-top: 0px;">
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
						 <div class="box-content">
			 <div class="box-category">
				 {%FOR catalog_full%}
				 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
				 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
					 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>{% IF catalog_full.ISSET_SUB %}<em class="open-close">&nbsp;</em>{% ENDIF %}
				 {% 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%}
			 </div>
			 </div>
			 </div>
		 <!-- end Каталог -->

далее в конец файла main.js добавьте

$(document).ready(function() {
										 $('.parent .open-close').click(function(){
	 if ($(this).hasClass('active')) {
		 $(this).parent().children('.accordion').slideUp('slow');
		 $(this).removeClass('active');
		
	 } else {
		 $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
	 }
										 });
										 });

далее в конец файла main.css добавьте

.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(225deg);
-o-transform: rotateZ(225deg);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
}

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

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

Наверх

#5 Vaccina

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

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

Отправлено 14 Сентябрь 2016 - 03:26

В конец main.JS вставьте:

$(document).ready(function() {
																				  $('.parent .open-close').click(function(){
				if ($(this).hasClass('active')) {
				 $(this).parent().children('.accordion').slideUp('slow');
				  $(this).removeClass('active');
			   
				} else {
				  $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
				}
																				  });
																				  });

Наверх

#6 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 14 Сентябрь 2016 - 19:25

Vaccina (14 Сентябрь 2016 - 03:26) писал:

В конец main.JS вставьте:

$(document).ready(function() {
																				 $('.parent .open-close').click(function(){
			 if ($(this).hasClass('active')) {
				 $(this).parent().children('.accordion').slideUp('slow');
				 $(this).removeClass('active');
			
			 } else {
				 $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
			 }
																				 });
																				 });

не работает, подкатегории открыты и всё, не закрываются, вообще ни как не работает

Vaccina (14 Сентябрь 2016 - 03:26) писал:

В конец main.JS вставьте:

$(document).ready(function() {
																				 $('.parent .open-close').click(function(){
			 if ($(this).hasClass('active')) {
				 $(this).parent().children('.accordion').slideUp('slow');
				 $(this).removeClass('active');
			
			 } else {
				 $(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
			 }
																				 });
																				 });

работает но не правильно, надо чтобы вначале при открытии сайта были закрыты подкатегории и стрелочка смотрела вправо, и чтобы когда человек нажимал на "категорию" открывались "подкатегории" и стрелочка переворачивалась вниз и наоборот, при ещё одном нажатии на "категорию" закрывались "подкатегории"

Наверх

#7 Ирина345

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

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

Отправлено 16 Сентябрь 2016 - 15:09

Dmitriy73 (14 Сентябрь 2016 - 19:25) писал:

не работает, подкатегории открыты и всё, не закрываются, вообще ни как не работает

работает но не правильно, надо чтобы вначале при открытии сайта были закрыты подкатегории и стрелочка смотрела вправо, и чтобы когда человек нажимал на "категорию" открывались "подкатегории" и стрелочка переворачивалась вниз и наоборот, при ещё одном нажатии на "категорию" закрывались "подкатегории"

Здравствуйте, найдите в файле main.css

$(document).ready(function() {
$('.parent .open-close').click(function(){
if ($(this).hasClass('active')) {
$(this).parent().children('.accordion').slideUp('slow');
$(this).removeClass('active');

} else {
$(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
}
});
});
.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(225deg);
-o-transform: rotateZ(225deg);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
}

замените на


.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}

Наверх

#8 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

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

Ирина345 (16 Сентябрь 2016 - 15:09) писал:

Здравствуйте, найдите в файле main.css

$(document).ready(function() {
$('.parent .open-close').click(function(){
if ($(this).hasClass('active')) {
$(this).parent().children('.accordion').slideUp('slow');
$(this).removeClass('active');

} else {
$(this).parent().children('.accordion').slideDown('slow');
$(this).addClass('active');
}
});
});
.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(225deg);
-o-transform: rotateZ(225deg);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
}

замените на


.accordion .accordion{display:none;}
.accordion {
width: 170px; position: relative;
}
.accordion li {
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}
.accordion li a:link,
.accordion li a:visited {
padding-left: 10px;
color: #666;
display: block;
}
.accordion li a:hover,
.accordion li a:active {
background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
color: #D0431D;
text-decoration: none;
}
.accordion .selected {color:#D0431D !important}
.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}

Спасибо работает, но можно ещё чтобы подкатекории открывались и закрывались не именно при нажатии на стрелочку а при нажатии на весь текст?

Наверх

#9 Vaccina

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

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

Отправлено 17 Сентябрь 2016 - 03:07

В main.css найдите:

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}

замените на:

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
width: 170px;
height: 28px;
position: absolute;
right: -9px;
margin-top: -28px;
cursor: pointer;
z-index:10;
display:block;
border: none;
}
.open-close:after {
	content: ">";
	text-align: right;
	font: bold 14px/28px Georgia;
	color: #666;
	position: absolute;
	right: 0;
	margin-top: 6px;
}
.open-close.active:after {
transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
}

Наверх

#10 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 17 Сентябрь 2016 - 10:04

Vaccina (17 Сентябрь 2016 - 03:07) писал:

В main.css найдите:

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
right: -9px;
margin-top: -14px;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
cursor: pointer;
}
.open-close.active {
padding: 2px;
width: 2px;
height: 2px;
position: absolute;
border-bottom: 4px solid #666;
border-right: 4px solid #666;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}

замените на:

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
width: 170px;
height: 28px;
position: absolute;
right: -9px;
margin-top: -28px;
cursor: pointer;
z-index:10;
display:block;
border: none;
}
.open-close:after {
content: ">";
text-align: right;
font: bold 14px/28px Georgia;
color: #666;
position: absolute;
right: 0;
margin-top: 6px;
}
.open-close.active:after {
transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
}

работает, но нужно чтобы при нажатии например "ЖЕНСКИЕ ДУХИ" открывались женские духи и подкатегории и при еще одном нажатии закрывались

Наверх

#11 Vaccina

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

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

Отправлено 17 Сентябрь 2016 - 12:28

.open-close.active:after {
transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
}

замените на:

.open-close.active:after {
content: '\2228';
}

Наверх

#12 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

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

Vaccina (17 Сентябрь 2016 - 12:28) писал:

.open-close.active:after {
transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
}

замените на:

.open-close.active:after {
content: '\2228';
}

не открывает категорию "ЖЕНСКИЕ ДУХИ"

Наверх

#13 Firefly

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

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

Отправлено 18 Сентябрь 2016 - 10:25

Dmitriy73 (17 Сентябрь 2016 - 20:48) писал:

не открывает категорию "ЖЕНСКИЕ ДУХИ"

Здравствуйте.
Если я Вас правильно понял - необходимо, чтобы при нажатии на кнопку "Женская парфюмерия" в блоке меню открывалась основная категория, но если так сделать, то в этом случае не будет работать раскрытие списка.
Одновременная работа этих двух функций технически невозможна.

Наверх

#14 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 18 Сентябрь 2016 - 17:30

Firefly (18 Сентябрь 2016 - 10:25) писал:

ну тогда надо чтобы при нажатии "Женская парфюмерия" открывалась женская парфюмерия, а стрелочка отвечала за раскрытие подкатегорий, можно еще сделать чтобы шапка сайта и левые блоки не обновлялись при просмотре товаров?

Наверх

#15 Firefly

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

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

Отправлено 18 Сентябрь 2016 - 18:22

Dmitriy73 (18 Сентябрь 2016 - 17:30) писал:

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

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
width: 170px;
height: 28px;
position: absolute;
right: -9px;
margin-top: -28px;
cursor: pointer;
z-index:10;
display:block;
border: none;
}

Замените на:

.open-close {transition: all 0.35s ease;-webkit-transition: all 0.35s ease;width: 20px;height: 28px;position: absolute;right: -9px;margin-top: -28px;cursor: pointer;z-index:10;display:block;border: none;}

Уточните, пожалуйста, более подробно какая информация у Вас обновляется в шапке и левом блоке при просмотре карточки товара.

Наверх

#16 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 24 Сентябрь 2016 - 12:02

Firefly (18 Сентябрь 2016 - 18:22) писал:

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

.open-close {
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
width: 170px;
height: 28px;
position: absolute;
right: -9px;
margin-top: -28px;
cursor: pointer;
z-index:10;
display:block;
border: none;
}

Замените на:

.open-close {transition: all 0.35s ease;-webkit-transition: all 0.35s ease;width: 20px;height: 28px;position: absolute;right: -9px;margin-top: -28px;cursor: pointer;z-index:10;display:block;border: none;}

всё информация которая есть все и обновляется, нужно чтобы при открытии подкатегории и нажатии на какую ни будь из них подкатегории не закрывались

Наверх

#17 Danil

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

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

Отправлено 25 Сентябрь 2016 - 12:16

Dmitriy73 (24 Сентябрь 2016 - 12:02) писал:

Здравствуйте.
Изменения Вам произвел, проверьте.

Наверх

#18 Dmitriy73

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

Пользователи
243 сообщений

ГородУльяновск

Отправлено 29 Сентябрь 2016 - 23:38

Danil (25 Сентябрь 2016 - 12:16) писал:

Здравствуйте.
Изменения Вам произвел, проверьте.

спасибо все работает!

Наверх

Обратно в Каталог товаров

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

Вопросы работы сервиса StoreLand → Другие вопросы → Проблема Со Ссылками При Переходе На Товар Из Меню Автор Гость_Goosenic_* , 26 янв. 2021 ссылки меню, товары, каталог	1 Ответ 1 063 Просмотров	stasia 26 янв. 2021
характеристики Вопросы работы сервиса StoreLand → Дизайн → Шаблон Техно → Каталог товаров → Вывод Характеристик В Товарах Отображаемых Таблицей Автор Гость_metry_* , 06 дек. 2020 характеристики, каталог, товары	0 Ответов 1 122 Просмотров	metry 06 дек. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Веган → Как Изменить Разделы Каталога И Добавить Подразделы? Автор Гость_lazar_* , 14 июня 2020 каталог	2 Ответов 798 Просмотров	lazar 14 июня 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Город → Каталог товаров → Выравнивание По Нижнему Краю И Названия Категорий Автор Гость_Максим Бакланов_* , 11 февр. 2020 каталог	3 Ответов 1 490 Просмотров	Vaccina 12 февр. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Техно → Главная → Изменение Ссылок И Текста На Блоках. Автор Гость_Galz_* , 20 апр. 2019 Менюблоки, каталог, ссылки	1 Ответ 1 776 Просмотров	Mr.Nito 21 апр. 2019

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

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

Как Сделать Стрелочку В Каталоге Товаров?

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

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

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

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

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

Войти

Google поиск