Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Открытие бокового меню категорий при наведении на CSS

Zapuzin

Автор: ,
в Песочница

 Share

Recommended Posts

Zapuzin Proficient

Zapuzin

Опубліковано:
Опубліковано: (змінено)

Добрый день.

ocStore 1.5.5.1.2

https://teplopl.com.ua

Установлен модуль "Меню Категорий Pro" вместо стандартного. Работает отлично.

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

С этим проблем нет, и работает отлично. 

Реш ил добавить в шапку меню галочку, которая должна переворачиваться при наведении.

 

695146504_____.png.3017cc2f5225c825ecee3d1cd1ad0a10.png

 

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

Никак не получается заставить эту галочку быть перевёрнутой всё время, пока меню открыто. https://teplopl.com.ua/avtomatika-priladi/avtomatika

Перепробовал много чего, но своими силами не получается.

Может кто подскажет, чего не хватает в этом куске файла:

Спойлер 

/* box */

.box {
	background: #fff;
	border: 1px solid #c9c9c9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
	-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
}
#content > #column-right > .box{
	height: 378px;
}
.box-categorypro {
	background: #fff;
	border: 1px solid #c9c9c9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-top: -76px;
	overflow: hidden;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
	-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
}
#content > #column-right > .box-categorypro{
	height: 378px;
}
.box-heading {
	background: #e5e5e5;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #3e3e3e;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px solid #c9c9c9;
	padding: 15px 10px 14px 10px;
	overflow: hidden;
}

.box-kheading {
	background: #e5e5e5;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #3e3e3e;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px solid #c9c9c9;
	padding: 18px 10px 15px 10px;
	overflow: hidden;
}

.box-fheading {
	background: #e5e5e5;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #3e3e3e;
	text-overflow: ellipsis;
	border-bottom: 1px solid #c9c9c9;
	padding: 15px 10px 14px 10px;
	overflow: hidden;
}

.box .store-heading,
.box .info-heading,
.box .filter-heading,
.box .category-heading,
.box .featured-heading,
.box .bestseller-heading,
.box .special-heading,
.box .viewed-heading,
.box .latest-heading,
.box .account-heading,
.box .affilate-heading{
	padding-left: 70px;
	position: relative;
}

.box .featured-heading{color: #598eb6;}
.box .bestseller-heading{color: #ff8a00;}
.box .special-heading{color: #f45a5a;}
.box .viewed-heading{color: #2f4b78;}
.box .latest-heading{color: #77ab5b;}

.box .store-heading:before,
.box .info-heading:before,
.box .filter-heading:before,
.box .category-heading:before,
.box .featured-heading:before,
.box .bestseller-heading:before,
.box .special-heading:before,
.box .viewed-heading:before,
.box .latest-heading:before,
.box .account-heading:before,
.box .affilate-heading:before{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 55px;
	height: 36px;
	border-right: 1px solid #dedede;
	-webkit-box-shadow: 1px 0 0 0 #fff;
	-moz-box-shadow: 1px 0 0 0 #fff;
	box-shadow: 1px 0 0 0 #fff;
	margin-top: -18px;
}

.box .store-heading:before {background: url(../image/store-icon.png) center no-repeat;}
.box .info-heading:before {background: url(../image/info-icon.png) center no-repeat;}
.box .filter-heading:before {background: url(../image/filter-icon.png) center no-repeat;}
.box .category-heading:before {background: url(../image/category-icon.png) center no-repeat;}
.box .featured-heading:before {background: url(../image/featured-icon.png) center no-repeat;}
.box .bestseller-heading:before {background: url(../image/bestseller-icon.png) center no-repeat;}
.box .special-heading:before {background: url(../image/special-icon.png) center no-repeat;}
.box .viewed-heading:before {background: url(../image/viewed-icon.png) center no-repeat;}
.box .latest-heading:before {background: url(../image/latest-icon.png) center no-repeat;}
.box .account-heading:before {background: url(../image/account-icon.png) center no-repeat;}
.box .affilate-heading:before {background: url(../image/affilate-icon.png) center no-repeat;}

.category-heading {
	padding-left: 60px;
	position: relative;
}

.category-heading:before,
.category-heading:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 55px;
	height: 36px;
	border-right: 1px solid #dedede;
	-webkit-box-shadow: 1px 0 0 0 #fff;
	-moz-box-shadow: 1px 0 0 0 #fff;
	box-shadow: 1px 0 0 0 #fff;
	margin-top: -18px;
}

.category-heading:before {
	right: 0;
	background: url(../image/category-icon.png) center no-repeat;
}

.category-heading:after {
	left: 197px;
	background: url(../image/resp-menu-arrow1.png) top no-repeat;

}

.category-heading:hover:after {
	left: 197px;	
	background: url(../image/resp-menu-arrow2.png) top no-repeat;
}

.box-content {
	background: #fff;
    display: block;
    position: relative;
}

.box-kcontent {
	background: #fff;
    display: none;
}


.box-kcontent:hover {display: block;}
.box-kheading:hover + .box-kcontent {display: block;}


/* box products */

 

 

Или указать, намекнуть на причину.

Или может кто готов поправить за вознаграждение.

 

Змінено користувачем Zapuzin
Надіслати
Поділитися на інших сайтах

Zapuzin Proficient

Zapuzin

Опубліковано:
  • Автор
Опубліковано:

 

11 минут назад, Blast сказал:

прикрутить стрелочку не к элементу с классом category-heading, а к родительскому box-categorypro

Благодарю.

Уже увидел свет в конце тоннеля )

Играюсь с позиционированием галочки.

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду