Как сделать аккордеон на CSS3


Как сделать аккордеон на CSS3

Добрый день. Давненько не делал интересных вещей на CSS3, хочу исправить сегодня это упущение. Расскажу как сделать “аккордеон”, прикольная штуковина для статических страниц. Экономит место, выглядит красиво, делать его не сложно.газонокосилка механическая husqvarna Сплошные плюсы, давайте попробуем…

Как сделать “аккордеон” на CSS3

Итак, будем использовать свойства CSS3, а конкретнее псевдокласс :target и немного анимации, которую реализуем через свойство transition.В итоге должно получиться вот так:

Demo_Accordeon

Для этого создаем новый документ, стандарта HTML5 и используем там тег section, о котором я уже писал в статье Структурные теги HTML5.
Теперь перейдем непосредственно к самому коду.

HTML

<div class="accordion">
 <section id="one">
  <h2><a href="#one">Заголовок 1</a></h2>
   <div>
    <p>content</p>
   </div>
 </section>
 <section id="two">
   <h2><a href="#two">Заголовок 2</a></h2>
    <div>
     <p>content</p>
    </div>
 </section>
</div>
Создаем блок, который является основой нашего аккордеона. В нем две секции(или сколько вам необходимо), в них содержится текст, структура достаточно проста.
Теперь оформим блоки и заставим их двигаться плавно:

CSS

section{displayblock;}
.accordion{
background-color#eee;
border1px solid #ccc;
width600px;
padding10px;
margin50px 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-bottom1px solid #ccc;
margin5px;
background-color#fff;
background-image: -webkit-gradient(linear, left topleft 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{margin0;}
.accordion p{padding10px;}
.accordion h2 a{
displayblock;
positionrelative;
font14px/1 'Trebuchet MS''Lucida Sans';
padding10px;
color#333;
text-decorationnone;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}
.accordion h2 a:hover{background#fff;}
.accordion h2 + div{
height0;
overflowhidden;
-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'';
positionabsolute;
right10px;
top50%;
margin-top-3px;
border-top5px solid #333;
border-left5px solid transparent;
border-right5px solid transparent;}
.accordion :target h2 + div{height100px;}
Кода много, но он достаточно простой. Основной момент, эдакая фишка этого кода – изначально высота блока – 0 пикселей, при клике срабатывает псевдокласс :target и высота становится 100 пикселей, при этом же работает анимация через свойство transition. Вот в принципе и все. Все остальное – для красоты, можно смело удалять градиенты и тени, функционал не пострадает. Все же красивая страница привлекает больше внимания, юзабилити, черт побери
Удачного дня!
Источник: gering111.com
Помошь в статье: http://u.to/LKNQ
Previous Какой совет вы бы дали новичку в CSS?
Next Пак необходимых плагинов – WordPress Plugins Pack

Suggested Posts

OcStore 2.1 (OpenCart 2.1) улучшаем страницы товаров

Как создать уведомления с помощью CSS3 и jQuery

Самые классные JQuery плагины за последние месяца

Модуль CSV Price Pro import/export 4.1.11-3.3.6

Модуль редакторов для быстрого редактирования v.2.0.1

Инструкция как стать программистом с нуля