Вміст у вигляді акордеона на css

Сьогодні ми створимо вертикальний і горизонтальний акордеон для вмісту використовуючи лише технологію CSS3. Звичайно, існує величезна безліч плагінів, які дозволяють зробити це, але а якщо користувач зайшов до вас на сайт з відключеним javascript в браузері? А даний акордеон буде працювати правильно навіть в цьому випадку. Якщо ви створите акордеон на CSS, то він буде правильно відображатися для всіх користувачів, браузери яких підтримують технологію CSS3.

Коли я писав урок про те як зробити меню у вигляді акордеона. Можливо когось зацікавить:

Меню для сайту в стилі акордеона

Приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Структура документа буде складатися з контейнерів, усередині яких знаходиться блок. У цьому уроці ми створимо 5 вкладок:

12345678910111213141516171819202122

lt;div class="Accordion horizontal"gt;id="About"gt;lt;h2gt; lt;a href="#about"gt; Інформація про компаніюlt;/agt; lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur ...lt;/pgt;lt;/sectiongt;id="Services"gt;lt;h2gt; lt;a href="#services"gt; Сервісиlt;/agt; lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur ...lt;/pgt;lt;/sectiongt;id="Blog"gt;lt;h2gt; lt;a href="#blog"gt; Блогlt;/agt; lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur ...lt;/pgt;lt;/sectiongt;id="Portfolio"gt;lt;h2gt; lt;a href="#portfolio"gt; Портфоліоlt;/agt; lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur ...lt;/pgt;lt;/sectiongt;id="Contact"gt;lt;h2gt; lt;a href="#contact"gt; Контактиlt;/agt; lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur ...lt;/pgt;lt;/sectiongt;lt;/divgt;

Ви додаєте стільки блоків, скільки вкладок вам необхідно.

CSS частина

Спочатку задамо стиль для основного контейнера:

12345678

.accordion {width:830px-overflow:hidden-margin:10px auto-color:# 474747-background:# 414141-padding:10px-}

Потім для кожної вкладки:

1234567891011121314

.accordion section{float:left-overflow:hidden-color:# 333-cursor:pointer-background: # 333-margin:3px-}.accordion section: hover {background:# 444-}.accordion section p {display:none-}

Оскільки відкрито зазвичай одна вкладка, або все закриті, то необхідно все решта приховати, що ми робимо в такий спосіб:

1234567891011

.accordion section: after{position:relative-font-size:24px-color:# 000-font-weight:bold-}.accordion section: nth-child(1): after{ content:`1`- }.accordion section: nth-child(2): after{ content:`2`- }.accordion section: nth-child(3): after{ content:`3`- }.accordion section: nth-child(4): after{ content:`4`- }.accordion section: nth-child(5): after{ content:`5`- }

За допомогою псевдо-селектора : target можна визначити обрану вкладку, а також задати їй стиль:

12345678910111213141516171819202122232425

.accordion section: target {background:#FFF-padding:10px-}.accordion section: target: hover {background:#FFF-}.accordion section: target h2 {width:100%-}.accordion section: target h2 a{color:# 333-padding:0-}.accordion section: target p {display:block-}.accordion section h2 a{padding:8px 10px-display:block-font-size:16px-font-weight:normal-color:#eee-text-decoration:none-}

У цьому прикладі у нас горизонтальний слайдер. Спочатку він прихований і має ширину 5%:

12345678

.horizontal section{width:5%-height:250px--moz-transition: width 0.2s ease-out--webkit-transition:width 0.2s ease-out--o-transition:width 0.2s ease-out-transition:width 0.2s ease-out-}

Також необхідно позиціонувати номера вкладок:

Відео: АККОРДЕОН НА CSS

1234	.horizontal section: after{top:140px-left:15px-}

Потім вкладка розкривається, тобто ширина стає 243 пікселя:

1234567891011121314151617181920212223

.horizontal section h2 {-webkit-transform:rotate(90deg)--moz-transform:rotate(90deg)--o-transform: rotate(90deg)-transform: rotate(90deg)-width:240px-position:relative-left:-100px-top:85px-}.horizontal : target{width:73%-height:230px-}.horizontal : target h2{top:0px-left:0--webkit-transform:rotate(0deg)--moz-transform:rotate(0deg)--o-transform: rotate(0deg)-transform: rotate(0deg)-}

Для вертикального акордеона стилі трохи відрізняються:

Відео: СSS-рецепти

12345678910111213141516171819202122232425262728

.vertical section{width:100%-height:40px--webkit-transition:height 0.2s ease-out--moz-transition:height 0.2s ease-out--o-transition:height 0.2s ease-out-transition:height 0.2s ease-out-}.vertical : target{height:250px-width:97%-}.vertical section h2 {position:relative-left:0-top:-15px-}.vertical section: after{top:-60px-left:810px-}.vertical section: target: after{left:-9999px-}