Створюємо акордеон з використанням лише CSS

У цьому уроці ми розберемося, як створити такий популярний елемент дизайну веб-сторінок як акордеон з використанням тільки HTML і CSS (буде додано трохи CSS3 для організації переходу між слайдами). У результаті ми отримаємо код для двох варіантів акордеону – горизонтального та вертикального.

Горизонтальний акордеон

Почнемо із розмітки для горизонтального акордеону. Вона не містить нічого специфічного, тільки звичайний код HTML:

Ми використовуємо простий невпорядкований список, який містить кілька елементів із класами. Все просто. А CSS код перетворює розмітку на те, що нам потрібно:

Все досить просто та очевидно. Спочатку ми визначаємо клас .accordion для елемента

, де задається ширина і приховування елемента контенту, що виступає за рамки, а також деякі інші правила для стилізації зовнішнього вигляду.

Потім ми зміщуємо пункти списку вліво, задаємо їм ширину 20% (100% ÷ 5 = 20% ) і встановлюємо властивість overflow:hidden; щоб нічого не виступало за рамки елемента. Також встановлюється фіксована висота, яка відмінно підходить для розміщення контенту під час розгортання списку.

Для динамічного ефекту під час розгортання пункту списку ми встановлюємо час переходу 0.2 секунди та ефект плавного переходу.

Потім використовуються дуже корисні селектори :first- і :last-of-type для завдання округлених кутів зліва вгорі та внизу для першого пункту списку та праворуч вгорі та внизу для останнього пункту списку відповідно.

Потім ми встановлюємо відступ 10 px для елемента

Тепер ми встановлюємо функціонал акордеону:

Це правило стверджує таке: як тільки курсор миші виявиться над елементом

потрібно зробити всі елементи шириною 10%.

Таким чином, ми отримаємо5×10% = 50%. 5 слайдів шириною 10% у списку. Тобто ми маємо 50% вільного простору для того, щоб заповнити його пунктом списку, над яким знаходиться курсор миші.

10% пункту списку + 50% вільного простору = 60%

Тепер ми просто встановлюємо правило: пункт списку, над яким знаходиться курсор миші, треба зробити завширшки 60%:

Загалом функціонал використовує два правила і розшифровується так: коли курсор миші знаходиться над списком, потрібно встановити ширину всіх пунктів списку, що дорівнює 10% ширини елемента

Але той елемент, над яким знаходиться курсор миші, треба зробити шириною 60%.

10% + 10% + 10% + 10% + 60% = 100%

Останній блок коду просто встановлює кольори для наших слайдів.

Вертикальний акордеон

Тепер розберемося з вертикальним акордеоном. Для нього ми будемо використовувати ідентичну розмітку HTML з єдиним додаванням ID для елемента

:

Тепер ми стикаємо пункти списку один до одного по вертикалі. Встановлюємо для них ширину 100% та використовуємо логіку 10%/60% для завдання висоти. Код CSS має такий вигляд:

Ми явно встановлюємо ширину, що дорівнює 100% у правилі для селектора: hover, але логіка для розрахунку значень висоти не змінилася.

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: csswizardry.com/2011/02/pure-css3-accordion/ Переклав: Сергій Фастунов Урок створено: 4 Березня 2011 Переглядів : 38718 Правила передруку

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумеднихпідказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.

---