Webmasters.BY

CSS3 accordion
Рейтинг пользователей: / 4
ХудшийЛучший 
17.11.2011 00:00

css3 accordion

Сегодня вы узнаете, как создать довольно просто анимированный CSS3 аккордеон с помощью псевдо-класса :target.

Что такое аккордеон

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

HTML5

Для этого эксперимента я буду использовать один из новых элементов HTML5, речь идет о section элементе. При использовании новых элементов HTML5, таких как этот, для старых браузеров вам необходимо использовать следующий прием:

<script>document.createElement('section');</script>

Чтобы упростить такие вещи, здесь я просто использовал скрипт для включения HTML5 элементов в Internet Explorer. Речь идет о html5shiv от Remy Sharp:

 <!--[if lt IE 9]>
 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Разметка

Хватит теории, давайте посмотрим, как это работает:

<div class="accordion">
 <section id="one">
 <h2><a href="#one">Heading 1</a></h2>
 <div>
 <p>content</p>
 </div>
 </section>
</div>

Div аккордеон обертывает разделы, которые составляют содержание аккордеона.

Каждый раздел section содержит название и, конечно, его содержание.

CSS

section
{
 display: block;
}
.accordion
{
 background-color: #eee;
 border: 1px solid #ccc;
 width: 600px;
 padding: 10px;
 margin: 50px auto;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -moz-box-shadow: 0 1px 0 #999;
 -webkit-box-shadow: 0 1px 0 #999;
 box-shadow: 0 1px 0 #999;
}
.accordion section
{
 border-bottom: 1px solid #ccc;
 margin: 5px;
 background-color: #fff;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
 background-image: -webkit-linear-gradient(top, #fff, #eee);
 background-image:    -moz-linear-gradient(top, #fff, #eee);
 background-image:     -ms-linear-gradient(top, #fff, #eee);
 background-image:      -o-linear-gradient(top, #fff, #eee);
 background-image:         linear-gradient(top, #fff, #eee);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.accordion h2, .accordion p
{
 margin: 0;
}
.accordion p
{
 padding: 10px;
}
.accordion h2 a
{
 display: block;
 position: relative;
 font: 14px/1 'Trebuchet MS', 'Lucida Sans';
 padding: 10px;
 color: #333;
 text-decoration: none;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.accordion h2 a:hover
{
 background: #fff;
}
.accordion h2 + div
{
 height: 0;
 overflow: hidden;
 -moz-transition: height 0.3s ease-in-out;
 -webkit-transition: height 0.3s ease-in-out;
 -o-transition: height 0.3s ease-in-out;
 transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after
{
 content: '';
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -3px;
 border-top: 5px solid #333;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
}
.accordion :target h2 + div
{
 height: 100px;
}

Результат

css3 accordion result

Онлайн-демо

Поддержка браузеров

Демо работает в браузерах, которые поддерживают псевдо-класс :target. Проверить совместимость можно здесь.

Итак, если вы хотите использовать этот пример для ваших проектов, то вы должны знать, что на данный момент он не является кросс-браузерным.

Перевод

Добавить комментарий


Защитный код
Обновить

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Обновлено 17.11.2011 11:02
 

Апельсин-1

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

TisRef

Баннер

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 33 гостей онлайн

Комментарии

Статистика
Webmasters.BY © 2008 - 2012