Слайдер «аккордеон» для сайдбара с помощью CSS3

В сайдбаре блогов или сайтов часто не хватает места для всех информационных блоков с текстами, которые вы, возможно, бы хотели там разместить. Часто для этого используются табы — это что-то вроде закладок, которые переключают несколько страницы контента. Метод работает отлично и экономит место в сайдбаре. Сегодня предлагаю рассмотреть еще одну похожу по назначению разработку — слайдер «аккордеон» (Accordion). Визуально он выглядит приблизительно так:

То есть имеются пункты своеобразного меню (кнопки), при клике на которые отрывается текстовая область. Когда все элементы скрыты этот блок занимает минимум места, если что-то кому-то нужно — открывает и читает. Вообще данный элемент можно использовать не только в сайдбаре, а где угодно. Сейчас имеется достаточно разных вариантов реализации «CSS аккордеонов» с помощью :target pseudo-class. Проблема с использованием :target в том, что мы не сможем реально закрыть область контента или реализовать множественное открытие нескольких пунктов одновременно.

Предлагаю рассмотреть более продвинутую реализацию скрипта где с помощью скрытых элементов inputs и labels создадим слайдер аккордеон с небольшой анимацией при открытие и закрытии пунктов меню. Кстати, текущее состояние каждого элемента сможем контролировать с помощью скрытых чекбоксов (checkboxes). Также в качестве альтернативы можно применить radiobuttons, если нам нужно ограничить открытие только одного элемента за раз. Следует заметить, что данная реализация будет работать только в тех браузерах, которые поддерживают опции и возможности технологии CSS3.

HTML разметка

Начнем с HTML разметки страницы. Мы будем рассматривать вариант с checkbox, где одна секция будет открыта по умолчанию. Вся конструкция будет обернута в котейнер с классом ac-container. Каждый элемент будет содержать checkbox, label с заголовком и 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. Это требуется для проверки checkbox`а, когда пользователь кликает по одному из пунктов меню.  В тоже время для каждого тега article будет определен свой класс дабы мы могли указать насколько большой по высоте будет открываться блок (к сожалению, если бы мы использовали auto для высоты, у нас не получилась бы анимация).

CSS стили

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

.ac-container {
width: 400px;
margin: 10px auto 30px auto;
}

Дальше делаем из label кликабельные кнопки с применением для них градиентного фона, теней и эффекта нажатия. Также указываем 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;
}

Когда мы кликаем по кнопке checkbox становится активным и мы меняем стиль данного элемента на активный:

.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 для которого checkbox в input был отмечен — не зря мы задавали атрибут for. Также можно добавить небольшую стрелочку для кнопки с использованием псевдо класса 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;
}

Область контента имеет нулевое начальное значение высоты (height) = 0 px. Также добавим переход для параметра height и тень для блока. Значение перехода для высоты блока указываем также и для активного пункта меню дабы контролировать оба состояния. Причем, если вы заметили, закрытие области контента будет происходить быстрее чем открытие.

.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;
}

Вот, в принципе, и все. Следует также заметить, что мобильные браузеры могут не сработать по нажатию на кнопку label. Для большей наглядности рекомендую глянуть ДЕМО скрипта. Здесь представлены 3 варианта его реализации — с использованием Checkboxes в обычном режиме и с уже открытым пунктом по умолчанию, а также вариант с Radio Buttons что позволяет одновременно открывать только один блок (такое иногда бывает). Внимание, все исходники скрипта можете скачать с этого сайта.

Вообще скрипт «слайдера аккордеона» (или даже не знаю как правильнее его назвать) получился достаточно эффективным решением. При этом он не так сложен, как могло показаться — простой html код, немного CSS3 и все готово. Исходные коды вам также пригодятся в изучении того как все работает. Вообще радуют новые технологии CSS3 что позволяют создавать весьма интересные вещи без Javascript.

P.S. Не знаете что подарить девушке? интернет магазин парфюмерии http://makeup.com.ua/ поможет вам в этом нелегко выборе, качественный духи обязательно понравятся даме сердца.