Jump to content
Sign in to follow this  
Vadim455

Container design

Recommended Posts

Ребят, внизу есть раздвигающееся меню: ЗДЕСЬ. Можете подсказать, как сделать так, чтобы стрелка была видна изначально возле Заголовка, как ЗДЕСЬ. А то у меня только при наведении...

 Стиль:

.ac-container{
	margin: 10px auto 30px auto;
	text-align: left;
}
.ac-container label{
 	
        font-family: "Open Sans",sans-serif;
        text-transform: uppercase;
	padding: 0px 27px;
	position: relative;
	z-index: 20;
	display: block;
	height: 48px;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	line-height: 48px;
	font-size: 18px;
	background: #fac05a
	
}
.ac-container label:hover{
	background: #5cacdf;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #fac05a;
	color: #fff;
	
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: url(../image/arrow_down.png) no-repeat left;	

}
.ac-container input:checked + label:hover:after{
	background-image: url(../image/arrow_up.png)
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

}
.ac-container input:checked ~ article.ac-small{
	height: 100%;
}
.ac-container input:checked ~ article.ac-medium{
	height: 100%;
}
.ac-container input:checked ~ article.ac-large{
	height: 100%;
} 

Share this post


Link to post
Share on other sites

Текст в label, заворачиваем в <span> и добавляем классы:

display: inline-block; 
vertical-align: middle;

у всех label:after убираем:

position: absolute;
top, right

добавляем:

display: inline-block;
vertical-align: middle;

готово

Share this post


Link to post
Share on other sites

Стрелка поменяла местоположения, но все равно видна только при наведении... нужно, чтобы она стояла возле текста изначально, без наведения. Вот, что получилось: 

 .ac-container{
	margin: 10px auto 30px auto;
	text-align: left;
}
.ac-container label{
 	
        font-family: "Open Sans",sans-serif;
        text-transform: uppercase;
	padding: 0px 27px;
	position: relative;
	z-index: 20;
	display: block;
	height: 48px;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	line-height: 48px;
	font-size: 18px;
	background: #fac05a; 
	display: block; 
  vertical-align: middle;
	
}
.ac-container label:hover{
	background: #5cacdf;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #fac05a;
	color: #fff;
	
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	display: inline-block;
  vertical-align: middle;
	width: 24px;
	height: 24px;
	background: url(/image/catalog/downarrow.png) no-repeat left;	

}
.ac-container input:checked + label:hover:after{
	background-image: url(../image/arrow_up.png)
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

}
.ac-container input:checked ~ article.ac-small{
	height: 100%;
}
.ac-container input:checked ~ article.ac-medium{
	height: 100%;
}
.ac-container input:checked ~ article.ac-large{
	height: 100%;
} 
Edited by afwollis

Share this post


Link to post
Share on other sites

http://htmlbook.ru/css/hover

тупо дайте стили элементу которые он должен иметь не при наведении, а при наведении их ... не, я так не могу. Пишите в лс, если не можете сделать сами. Читайте и думайте если не можете написать в лс. 

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.

Sign in to follow this  

  • 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.