Перейти к содержанию
Vadim455

Container design

Рекомендуемые сообщения

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

 Стиль:

.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%;
} 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

position: absolute;
top, right

добавляем:

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

готово

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 .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%;
} 
Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

http://htmlbook.ru/css/hover

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.