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

20.06.2011

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

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

Для этого создаем новый документ, стандарта 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{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;}

Кода много, но он достаточно простой. Основной момент, эдакая фишка этого кода — изначально высота блока — 0 пикселей, при клике срабатывает псевдокласс :target и высота становится 100 пикселей, при этом же работает анимация через свойство transition. Вот в принципе и все. Все остальное — для красоты, можно смело удалять градиенты и тени, функционал не пострадает. Все же красивая страница привлекает больше внимания, юзабилити, черт побери Традиционно, выкладываю пример аккордеона.
Если что осталось непонятным, спрашивайте в комментариях, расскажу подробнее. Ну и подписывайтесь на обновления, обещаю много интересного.
Удачного дня

,

Комментариев: 24

  1. GerinG

    По диагонали — точно невозможно ))))) Ну по крайней мере не с шаманским бубном

    Ответить
    • Владимир

      а по горизонтали или ёлочкой? просто люблю необычные весщи, ничо не могу с собой поделать, люблю извращаться!!!

      Ответить
  2. GerinG

    Это не совсем меню, это аккордеон, поэтому у него и принцип работы другой совсем.
    А выдвигаться по горизонтали — это вам лучше табы сделать. Я про них пока не писал. Если хотите — сделаем

    Ответить
    • Владимир

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

      Ответить
  3. Владимир

    Да и решил проблемы с формой, как говорится: а ларчик просто открывался! Короче надо стили прописывать не на тег input, а на id=»input», либо class=»input», кому как больше нарвиться

    Ответить
  4. Александр

    Доброй ночи «GerinG».
    Не подскажите как сделать, чтобы ваше меню выдвигалось по горизонтали

    Ответить
  5. Владимир

    А воот сейчас попробовал форму воткнуть туды и ничего кроме textarea не выводиться … люди может кто может правильно переписать те стили, чтобы их тег input не кофликтовал с тегами формы

    Ответить
  6. Владимир

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

    Ответить
  7. GerinG

    Владимир, эмммм… Скажем так — совершенно другим подходом
    Но мысль у них весьма правильная, чекбоксы использовать это оригинально.

    Ответить
  8. Bars

    Еще как надо. Везде аналогичный пример рассмотрен и везде он заканчивается комментарием: «Как сделать свёртывание на повторном клике?». Решения пока нигде не встретил.

    Ответить
  9. Bars

    Хорошая штука, спасибо за урок. =)
    Кто-нибудь докопал обратное закрытие при клике? Чего-то не разберусь.

    Ответить
  10. GerinG

    Покопайте в сторону :active, мне с мобильного тяжеловато что-то насоветовать

    Ответить
  11. Владимир

    Прикольная весщь! А как сделать так чтобы открытая вкладка, при клике на неё закрывалась?! А то получается, что открыл вкладку и она вечно открыта…

    Ответить
    • GerinG

      Все, что выше IE8, точно поддерживает.
      FF 3.5+, Chrome 8+, Opera 10+

      Ответить
  12. Andrej Golub2011

    Можно не отвечать, я поставил для стартовой загрузки active: и номер не существующего пункта. Получил требуемый результат. 

    Ответить
  13. Andrej Golub2011

    Как сделать так, что-бы все пункты при загрузке были закрыты. По умолчанию  аккордеон открывает первый пункт.

    Ответить
  14. Andrey

    В этом месте «о котором я уже писал в статье(линк).»линк — пустой

    Ответить