Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Аккордеон на CSS3
Аккордеон на CSS3

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

Эта статья в первую очередь предназначена для демонстрации работы с псевдоклассом :target, аккордеон выбран только в качестве удачного примера реализации. Итак, что же такое псевдокласс :target и чем он может быть нам полезен. Согласно спецификации, псевдокласс :target применяется к так называемому целевому элементу, то есть к элементу, ID которого совпадает с названием анкора в адресной строке браузера. Поясню на примере. Допустим, на странице example.html есть такой элемент:
  1. <h1 id="head1">Заголовок</h1>
а в стилях описано следующее правило:
  1. <style type="text/css">
  2. h1:target {
  3.     color:#FF0000;
  4. }
  5. </style>
Теперь, если открыть страницу с анкором example.html#head1, к указанному заголовку с id равным head1 автоматически применится это правило и он станет красного цвета. Этот же принцип мы будем использовать для создания аккордеона. По умолчанию все его блоки скрыты, а при переходе на анкор выбранный блок становится видимым. Начнем с верстки. Чтобы не усложнять понимание, я оставил в примере только минимально необходимый код. Вот что получилось:
  1. <div>
  2.     <div class="accord" id="page1">
  3.         <a href="#page1">&#9658; Page 1</a>
  4.         <div class="content">Content 1</div>
  5.     </div>
  6.     <div class="accord" id="page2">
  7.         <a href="#page2">&#9658; Page 2</a>
  8.         <div class="content">Content 2</div>
  9.     </div>
  10.     <div class="accord" id="page3">
  11.         <a href="#page3">&#9658; Page 3</a>
  12.         <div class="content">Content 3</div>
  13.     </div>
  14.     <div class="accord" id="page4">
  15.         <a href="#page4">&#9658; Page 4</a>
  16.         <div class="content">Content 4</div>
  17.     </div>
  18. </div>
Теперь опишем поведение блоков и их видимость в таблице стилей. Тут я тоже оставил только самое необходимое:
  1. /* блок является целевым элементом */
  2. div.accord:target .content {
  3.     displayblock;
  4. }
  5. /* блок не является целевым элементом */
  6. div.accord:not(:target) .content {
  7.     displaynone;
  8. }
Полностью оформленный HTML-код аккордеона с CSS-стилями, а также пример его работы вы можете посмотреть на демонстрационной страничке.

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

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 963 | Комментариев: 3

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (19.10.2016 в 19:13):
Тут упор не на спецэффекты, а на использование :target. А так да, конечно можно добавить.
DiPrm (19.10.2016 в 16:27):
Отличная гармонь получилась! Чтобы она еще и заиграла, можно добавить CSS3 эффектов типа transition для плавности переходов.
Ellephant (19.10.2016 в 06:55):
плюсую

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0041 сек.) / Память: 4.5 Mb
Наверх