Jump to content
Zapuzin

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

Recommended Posts

Добрый день.

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 */

 

 

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

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

 

Edited by Zapuzin

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites

 

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

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

Благодарю.

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

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

Share this post


Link to post
Share on other sites

Ура, получилось!

Всё работает, как и хотелось.

Blast, благодарю за подсказку!

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.