Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Аккордеон на чистом CSS3 Категория: CSS
Название: Аккордеон на чистом CSS3
Дата добавления: 11-11-2012
Раз просмотрено: 3185
Комментарии: 3
Рейтинг: * * * * * * * * · · (10 голосов)

Аккордеон на чистом CSS3

С CSS3 многие вещи, которые мы привыкли создавать на JavaScript, теперь можно сделать полностью на CSS. Конечно, это не означает, что мы всегда должны поступать так, ведь решения, созданные на чистом CSS и работающие почти во всех браузерах, действительно трудно создать. Однако, будет полезно быть в курсе возможностей CSS3 для того, чтобы иметь возможность выбирать наилучший метод для создания веб-страниц. В этом уроке вы научитесь создавать стильный и анимированный аккордеон на чистом CSS3.

В результате, с помощью одного только HTML и CSS вы получите вот такой стильный аккордеон. Его демонстрацию вы можете увидеть здесь.

Аккордеон на чистом CSS3
Аккордеон на чистом CSS3

Переключение

Для создания стильного и современного аккордеон на чистом CSS3, он должен отвечать следующим требованиям:

HTML

В этом аккордеоне используется крайне простая HTML разметка — вложенные блоки представляют собой секции аккордеона, а в них находятся ссылка-заголовок и параграф с содержимым секции:

<div class="accordion">
  <div>
    <a href="#intro" id="intro">Вступление</a>
    <p>Lorem ipsum dolor sit amet…</p>
  </div>
  <div>
    <a href="#info" id="info">Общая информация</a>
    <p>Lorem ipsum dolor sit amet…</p>
  </div>
  <div>
    <a href="#contact" id="contact">Контакты</a>
    <p>Lorem ipsum dolor sit amet…</p>
  </div>
</div>

CSS

Переключение в этом аккордеоне на чистом CSS3 будет реализовано с помощью псевдокласса :target, а также смежных селекторов. Но существует несколько проблем, связанных с анимацией аккордеона: вместо скрывания и показа содержимого, нам придется изменять высоту от нуля до нужной и обратно. Второй, и основной минус этого метода заключается в необходимости задания высоты всех секций вручную в конце файла. Это следствие того, что мы не можем задать анимированное изменение высоты от 0 до значения auto. Вот весь необходимый CSS код для нашего аккордеона:

.accordion {
	width: 250px;
	background: #FFF;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	font: .7em/1.5 'Lucida Grande', Arial, sans-serif;
}
.accordion p {
	height: 0;
	margin: 0;
	padding: 0 15px;
	overflow: hidden;
	-webkit-transition: height .4s ease-out, padding .4s ease-out;
	-moz-transition: height .4s ease-out, padding .4s ease-out;
	-o-transition: height .4s ease-out, padding .4s ease-out;
	-ms-transition: height .4s ease-out, padding .4s ease-out;
	transition: height .4s ease-out, padding .4s ease-out;
}
.accordion a {
	display: block;
	height: 23px;
	line-height: 23px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEE), to(#CCC));
	background: -webkit-linear-gradient(#EEE, #CCC);
	background: -moz-linear-gradient(#EEE, #CCC);
	background: -o-linear-gradient(#EEE, #CCC);
	background: -ms-linear-gradient(#EEE, #CCC);
	background: linear-gradient(#EEE, #CCC);
	color: #333;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255 ,255, 255,.5);
	border-bottom: 1px solid #AAA;
	font-weight: bold;
}
.accordion a:hover, .accordion a:focus {
	opacity: .9;
}
.accordion a:active {
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC), to(#DDD));
	background: -webkit-linear-gradient(#CCC, #DDD);
	background: -moz-linear-gradient(#CCC, #DDD);
	background: -o-linear-gradient(#CCC, #DDD);
	background: -ms-linear-gradient(#CCC, #DDD);
	background: linear-gradient(#CCC, #DDD);
	color: #000;
}
:target + p {
	padding: 10px 15px;
	border-bottom: 1px solid #CCC;
}


/* Радиус скругления углов первой секции */
#intro {
	border-radius: 2px 2px 0 0;
}

/* Радиус скругления углов последней секции */
#contact {
	border-radius: 0 0 3px 3px;
}
#contact:target {
	border-radius: 0;
}


/* Высоты секций */
#intro:target + p {
	height: 70px;
}
#info:target + p {
	height: 200px;
}
#contact:target + p {
	height: 167px;
}

Недостатки

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

Вторым и основным недостатком этого аккордеона является его слабая поддержка браузерами. Сам его функционал сохранится, но вот анимации в старых версиях браузеров и в Internet Explorer поддерживаться не будут. Также, в старых браузерах могут не отображаться некоторые CSS3 свойства, такие как тени и градиенты.

Заключение

Но в итоге, можно сказать, что мы создали очень привлекательный и функциональный аккордеон, при помощи одного только CSS. Это значит, что он почти не замедлит загрузку вашего сайта, а его внешний вид легко впишется в дизайн почти каждого сайта. И у всех пользователей с достаточно современными браузерами, он будет отлично отображаться и работать.

Это интересно: «CSS фильтры».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.