Аккордеон при помощи CSS3

Главная

Статьи

Верстка сайтов

21.02.2012 10:20

Аккордеон при помощи CSS3

Сегодня мы рассмотрим еще один вариант создания аккордеона при помощи CSS3, в этом примере мы немного поэкспериментируем с обобщенным родственным комбинатором (the general sibling selector) и псевдо-классом :checked. Используя скрытые input-ы и теги label, мы создадим аккордеон, который будет скрывать/открывать содержимое при клике на заголовок.

Есть много вариантов создания аккордеона на CSS, большинство из которых реализуется с помощью псевдо-класса :target. Проблема с использованием псевдо-класса :target в том, что мы не можем закрыть содержимое области при повторном клике по заголовку или открыть несколько разделов одновременно. С помощью скрытых чекбоксов, мы можем контролировать открытие и закрытие отдельных областей. Кроме того, мы можем также использовать радио-кнопки, если только один раздел должен быть открыт в одно и тоже время.

Итак, давайте начнем!

Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах, которые поддерживают свойства CSS3.

Разметка

Мы приведем здесь разметку примера, который использует чекбоксы, где содержание раздела открыто по умолчанию (input должен быть "отмечен"). Все это будет обернуто в контейнер с классом ac-container. Для каждого элемента аккордеона, мы будем иметь чекбокс, лэйбл и блок article, в котором будет содержание этого элемента:

<section class="ac-container">

 <div>

 <input id="ac-1" name="accordion-1" type="checkbox" />

 <label for="ac-1">About us</label>

 <article class="ac-small">

 <p>Some content... </p>

 </article>

 </div>

 <div>

 <input id="ac-2" name="accordion-1" type="checkbox" checked />

 <label for="ac-2">How we work</label>

 <article class="ac-medium">

 <p>Some content... </p>

 </article>

 </div>

 <div><!--...--></div>

</section>

Обратите внимание, что мы должны дать каждому input-у ID, который мы будем затем использовать в атрибуте for для лэйбла. Нам нужно это для того, чтобы "отметить" соответствующий флажок при нажатии на тег label.

Каждый блок article будет иметь класс, который поможет нам определить, на какую высоту мы его должны раскрывать. (Оптимально, мы могли бы использовать "auto", как значение высоты, но, к сожалению, оно не анимируется, как надо.)

Теперь давайте перейдем к стилям.

CSS

Я опущу все префиксы браузеров, но вы их можете найти в исходниках.

Давайте определим ширину аккордеона и разместим его в центре:

.ac-container{

 width: 400px;

 margin: 10px auto 30px auto;

}

Далее, мы сделаем лэйблы похожими на интерактивные кнопки, задав им некоторый градиент фона. Зададим им также множественные тени и тонкие границы. Мы также установим z-index равный 20, чтобы убедиться, что он будет выше содержания раздела:

.ac-container label{

 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

 padding: 5px 20px;

 position: relative;

 z-index: 20;

 display: block;

 height: 30px;

 cursor: pointer;

 color: #777;

 text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

 line-height: 33px;

 font-size: 19px;

 background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

 box-shadow:

 0px 0px 0px 1px rgba(155,155,155,0.3),

 1px 0px 0px 0px rgba(255,255,255,0.9) inset,

 0px 2px 2px rgba(0,0,0,0.1);

}

При наведении мыши, мы поменяем фон на белый:

.ac-container label:hover{

 background: #fff;

} 

Когда мы нажимаем на тег label, чекбокс становится "отмеченным" и, когда это произойдет, мы хотим чтобы соответствующий лэйбл немного отличался от остальных:

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

 background: #c6e1ec;

 color: #3d7489;

 text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);

 box-shadow:

 0px 0px 0px 1px rgba(155,155,155,0.3),

 0px 2px 2px rgba(0,0,0,0.1);

}

Как видите, мы используем обобщенный родственный комбинатор (+), чтобы выбрать нужный нам тег label, так как он находится в коде непосредственно после чекбокса.

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

.ac-container label:hover:after,

.ac-container input:checked + label:hover:after{

 content: '';

 position: absolute;

 width: 24px;

 height: 24px;

 right: 13px;

 top: 7px;

 background: transparent url(../images/arrow_down.png) no-repeat center center;

}

Для "выбранного" пункта, мы хотим также показать эту стрелку:

.ac-container input:checked + label:hover:after{

 background-image: url(../images/arrow_up.png);

} 

И так как мы не хотим, чтобы input-ы были видны, мы спрячем их:

.ac-container input{

 display: none;

} 

Область содержания будет иметь начальную высоту 0px и любое его переполнение будет скрыто (overflow: hidden). Определим transition для выбранного элемента. Как вы можете видеть, мы сделаем закрытие немного быстрее, чем открытие.

.ac-container article{

 background: rgba(255, 255, 255, 0.5);

 margin-top: -1px;

 overflow: hidden;

 height: 0px;

 position: relative;

 z-index: 10;

 transition:

 height 0.3s ease-in-out,

 box-shadow 0.6s linear;

}

.ac-container input:checked ~ article{

 transition:

 height 0.5s ease-in-out,

 box-shadow 0.1s linear;

 box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);

}

Зададим стили для содержания:

.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.ac-small{

 height: 140px;

}

.ac-container input:checked ~ article.ac-medium{

 height: 180px;

}

.ac-container input:checked ~ article.ac-large{

 height: 230px;

}

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

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