Аккордеон на CSS3

Так называемый аккордеон, или вариант раскрывающегося горизонтального или вертикального меню, очень популярный элемент при оформлении сайтов. Существует огромное количество вариантов реализации, с использованием скриптов, стилей и разных HTML-элементов в качестве управляющих конструкций. Представляю вам мой вариант аккордеона на чистом CSS3, но не удивлюсь, если такой вариант уже где-то был.

Эта статья в первую очередь предназначена для демонстрации работы с псевдоклассом :target, аккордеон выбран только в качестве удачного примера реализации. Итак, что же такое псевдокласс :target и чем он может быть нам полезен. Согласно спецификации, псевдокласс :target применяется к так называемому целевому элементу, то есть к элементу, ID которого совпадает с названием анкора в адресной строке браузера. Поясню на примере. Допустим, на странице example.html есть такой элемент:а в стилях описано следующее правило:Теперь, если открыть страницу с анкором example.html#head1, к указанному заголовку с id равным head1 автоматически применится это правило и он станет красного цвета. Этот же принцип мы будем использовать для создания аккордеона. По умолчанию все его блоки скрыты, а при переходе на анкор выбранный блок становится видимым. Начнем с верстки. Чтобы не усложнять понимание, я оставил в примере только минимально необходимый код. Вот что получилось:Теперь опишем поведение блоков и их видимость в таблице стилей. Тут я тоже оставил только самое необходимое:Полностью оформленный HTML-код аккордеона с CSS-стилями, а также пример его работы вы можете посмотреть на демонстрационной страничке.

Такой метод реализации аккордеона имеет очевидные плюсы. Главный, конечно, в том, что аккордеон работает вообще без единой строчки скриптов. Также хочу отметить удобство навигации и внутренней перелинковки: страницу можно открыть сразу на нужной вкладке, при этом в браузере сохраняется история просмотра. Метод кроссбраузерный, поддерживается как современными десктопными, так и мобильными веб-обозревателями. Имеются и недостатки. Браузер IE младше 9-й версии не поддерживает псевдокласс :target, тут придется или использовать скрипты, или сразу держать все блоки открытыми через подключение дополнительных стилей для IE. Для сохранения валидности HTML-кода, на странице не может быть несколько элементов с одинаковым ID, из-за этого всю структуру необходимо реализовывать внутри одного блока. Для какой-нибудь странички-FAQ это не проблема, но для сайта с более сложной структурой возможностей только одного CSS может не хватить.

Комментарии

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

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.