4 способи створення Awesome CSS-Accordion
Зміст гармошок створює корисний шаблон дизайну. Їх можна використовувати для багатьох різних речей: для меню, списків, зображень, фрагментів статей, фрагментів тексту і навіть відео
Більшість акордеонів там покладаються на JavaScript, головним чином на jQuery, але оскільки використання передових методів CSS3 стало широко поширеним, ми також можемо знайти хороші приклади використовувати тільки HTML і CSS, які роблять їх доступними в середовищах з відключеним JavaScript.
Створення гармонійних CSS-гармонік може бути складним завданням, тому в цьому пості ми спробуємо розуміти основні поняття, які розробники використовують, коли їм потрібно створити.
При створенні CSS-вкладки зазвичай існують два основні підходи, кожен з яких має два випадки частого використання. Перший підхід використовує приховані елементи форми, другий використовує Псевдоселектори CSS.
1. Метод радіо-кнопки
Метод радіо-кнопки додає прихований вхід радіо і відповідний тег етикетки до кожної вкладки акордеону. Логіка проста: коли користувач вибирає вкладку, вони в основному перевіряють перемикач, який належить цій вкладці, так само, коли вони заповнюють форму. Коли вони клацають на наступній вкладці акордеона, вони вибирають наступний перемикач і т.д..
У цьому методі, відкривається лише одна вкладка в той самий час. Логіка HTML виглядає приблизно так:
Заголовок вмісту (не використовуйте тег h1)
Деякий вміст…
p>
Тобі потрібно додайте окрему пару радіо-міток для кожної вкладки у акордеоні. Тільки HTML не дасть бажаної поведінки, потрібно також додати відповідні CSS-правила, давайте подивимося, як це можна зробити.
Виправлені вертикальні вкладки висоти
У цьому рішенні (див. Скріншот нижче) розробник сховав перемикач за допомогою дисплей: немає; Правило, то він дав відносну позицію до мітки мітки, яка містить назву кожної вкладки, і абсолютну позицію до відповідного label: after псевдоелемент.
Останній містить ручку, позначену зеленим знаком +, який відкриває вкладки. Закриті вкладки також використовують ручку, позначену зеленим кольором “-” знаки. У CSS закриті вкладки вибираються за допомогою селектора element + element.
Також необхідно дати зміст відкритої вкладки фіксованою висотою. Для цього виділіть тіло відкритої вкладки (позначеної класом вмісту табуляції в HTML вище) за допомогою селектора CSS element1 ~ element2.
Основна логіка CSS тут полягає в наступному:
input [type = radio] display: none; label position: relative; дисплей: блок; label: after content: "+"; позиція: абсолютна; справа: 1em; input: checked + label: після content: "-"; input: check ~ .tab-content висота: 150px;
Ви можете подивитися повний CSS тут на Codepen. CSS спочатку написаний на Sass, але якщо ви натиснете на кнопку “Переглянути компіляцію” ви можете побачити скомпільований файл CSS.
Зображення акордеону з кнопками радіо
Цей гарний образ гармонік використовує той же метод перемикача, але замість ярликів розробник тут використовували HTML-тег HTML виконати поведінку акордеона.
CSS дещо інший, головним чином тому, що в цьому випадку вкладки не розташовані вертикально, а горизонтально. Розробник використовував CSS-селектор element + element (який був використаний в попередньому випадку для вибору перемикачів), щоб переконатися, що краї покритих зображень залишаються видимими.
Прочитайте докладний посібник про те, як створити цей елегантний CSS-гармонік.
2. Метод перевірки
Метод прапорця використовує тип вводу замість перемикача. Коли користувач вибирає вкладку, вони в основному перевіряють відповідний прапорець.
Різниця в порівнянні з методом радіо-кнопки полягає в тому, що вона одночасно можна відкрити більше однієї вкладки, так само, як можна перевірити декілька прапорців у формі.
З іншого боку, вкладки не закриваються самостійно, коли користувач натискає інший. Логіка HTML така ж, як і раніше, тільки в цьому випадку потрібно використовувати прапорець для типу введення.
Заголовок вмісту (не використовуйте тег h1)
Деякий вміст…
p>
Фіксований висота прапорець Аккорд
Якщо ви хочете мати фіксовану висоту вмісту, то логіка CSS буде майже такою ж, як у випадку з кнопкою перемикача, це просто тип входу змінився з радіо на прапорці. У цьому ручку Codepen ви можете подивитися на код.
Регулятор висоти флюїда Аккорд
Якщо одночасно відкрито більше однієї вкладки, відображення фіксованих вкладок висоти може негативно вплинути на досвід користувача, оскільки висота гармошки може значно зрости. Це можна поліпшити, якщо ви змінити фіксовану висоту на висоту рідини; це означає, що висота відкритих вкладок розширюється або зменшується відповідно до розміру вмісту, який вони містять.
Для цього потрібно змінювати фіксовану висоту вмісту вкладки до максимальної висоти, і використовувати відносні одиниці:
вхід: перевірено ~ .tab-content max-height: 50em;
Якщо ви хочете краще зрозуміти, як працює цей метод, ви можете подивитися на цей Codepen.
3. Метод: цільовий
: target є одним з псевдоселекторів CSS3. З її допомогою ви можете зв'язати HTML-елемент з якорним тегом наступним чином:
Назва вкладки
Зміст вкладки
Коли користувач натискає на назву вкладки, весь розділ відкриється завдяки : target псевдоселектор, а URL-адреса також змінюється на такий формат: www.some-url.com/#tab-1.
Відкриту вкладку можна ввести в CSS за допомогою section: target … правило. У нас є великий підручник тут, на hongkiat про те, як ви можете створити гарненький CSS-гармонії з : target метод як у вертикальних, так і в горизонтальних макетах.
Головний недолік : target метод вона змінює URL-адресу, коли користувач натискає вкладки. Це впливає на історію браузера, а кнопка назад браузера не переведе користувача на попередню сторінку, а на попередній стан акордеона.
4. Метод: hover
Цей останній недолік можна подолати, якщо ми використаємо : hover Псевдоселектор CSS замість : target, але в цьому випадку вкладки не реагують на клік, але на подію наведення. Хитрість тут в тому, що вам потрібно або приховати нерозкриті елементи, або зменшити їхню ширину або висоту - залежно від розташування вкладок
Закритий елемент повинен бути видимим, або встановлений на повну ширину / висоту, щоб змусити гармошку працювати.
Наступні 3 CSS-тільки гармонії були зроблені з методом: hover, натисніть на посилання нижче скріншотів, щоб подивитися на код.
Горизонтальне зображення акордеона
Перекошені акордеон
Активоване наведення курсором із станом за замовчуванням
