4 способа создать удивительные аккордеоны только для CSS
Контентные аккордеоны создают полезный шаблон дизайна. Вы можете использовать их для разных целей: для меню, списков, изображений, выдержек из статей, фрагментов текста и даже видео.
Большинство аккордеонов полагаются на JavaScript, в основном на jQuery, но так как использование передовых методов CSS3 стало широко распространенным, мы также можем найти хорошие примеры, которые использовать только HTML и CSS, которые делают их доступными в средах с отключенным JavaScript.
Создание аккордеонов только для CSS может быть сложной задачей, поэтому в этом посте мы попытаемся понимать основные концепции, которые используют разработчики, когда им нужно создать.
При создании вкладок только для CSS обычно есть два основных подхода, каждый из которых имеет два варианта использования. Первый подход использует скрытые элементы формы, в то время как второй использует CSS псевдоселекторы.
1. Метод радио-кнопки
Метод радио-кнопки добавляет скрытый радиовход и соответствующий ярлык для каждой вкладки аккордеона. Логика проста: когда пользователь выбирает вкладку, он в основном проверяет переключатель, который принадлежит этой вкладке, точно так же, как при заполнении формы. Когда они нажимают на следующую вкладку в аккордеоне, они выбирают следующий переключатель и т.д..
В этом методе, можно открыть только одну вкладку в то же время. Логика HTML выглядит примерно так:
Заголовок содержимого (не используйте тег h1 здесь)
Некоторый контент ...
р>
Вам нужно добавить отдельную пару радио-меток для каждой вкладки в аккордеоне. Один только HTML не даст желаемого поведения, вам также нужно добавить соответствующие CSS-правила, давайте посмотрим, как этого добиться.
Вертикальные вкладки с фиксированной высотой
В этом решении (см. Скриншот ниже) разработчик спрятал переключатель с помощью дисплей: нет; правило, то он дал относительную позицию тегу метки, который содержит заголовок каждой вкладки, и абсолютную позицию соответствующей метка: после того, как Псевдо-элемент.
Последний содержит маркер, помеченный зеленым знаком +, который открывает вкладки. Закрытые вкладки также используют ручку, отмеченную зеленым “-” приметы. В CSS закрытые вкладки выбираются с помощью селектора element + element.
Вам также нужно придать содержимому открытой вкладки фиксированную высоту. Для этого выберите тело открытой вкладки (помеченное классом tab-content в HTML выше) с помощью CSS-селектора element1 ~ element2..
Основная логика CSS здесь заключается в следующем:
вход [тип = радио] дисплей: нет; метка позиция: относительная; дисплей: блок; label: after content: "+"; положение: абсолютное; справа: 1em; вход: проверено + метка: после содержание: "-"; вход: проверено ~ .tab-content height: 150px;
Вы можете посмотреть полный CSS здесь на Codepen. CSS изначально написан на Sass, но если вы нажмете на “Посмотреть скомпилированный” Кнопка, вы можете увидеть скомпилированный файл CSS.
Изображение Аккордеон с Радио Кнопками
Этот красивый аккордеон изображения использует тот же метод переключателя, но вместо меток, разработчик здесь использовал HTML-тег figcaption для достижения поведения аккордеона.
CSS несколько отличается, в основном потому, что в этом случае вкладки располагаются не вертикально, а горизонтально. Разработчик использовал CSS + селектор element + element (который использовался в предыдущем случае для выбора переключателей), чтобы гарантировать, что края покрытых изображений все еще остаются видимыми.
Прочитайте подробное руководство о том, как создать этот элегантный аккордеон только для CSS.
2. Метод флажка
Метод флажка использует переключатель типа флажка вместо переключателя. Когда пользователь выбирает вкладку, он в основном проверяет соответствующий флажок.
Разница по сравнению с методом радио-кнопки заключается в том, что это можно открыть более одной вкладки одновременно, так же, как можно проверить несколько флажков внутри формы.
С другой стороны, вкладки не закрываются сами по себе, когда пользователь нажимает на другую. Логика HTML такая же, как и раньше, просто в этом случае вам нужно использовать флажок для типа ввода.
Заголовок содержимого (не используйте тег h1 здесь)
Некоторый контент ...
р>
Флажок фиксированной высоты Аккордеон
Если вы хотите использовать вкладки с фиксированной высотой, логика CSS почти такая же, как и в случае с переключателями, просто тип ввода был изменен с переключателя на переключатель. В этой ручке Codepen вы можете взглянуть на код.
Флажок Высота жидкости Аккордеон
Когда одновременно открыто несколько вкладок, отображение вкладок с фиксированной высотой может негативно повлиять на пользовательский опыт, так как высота гармошки может значительно возрасти. Это можно улучшить, если вы изменить фиксированную высоту на высоту жидкости; это означает, что высота открытых вкладок увеличивается или уменьшается в зависимости от размера содержимого, которое они содержат..
Для этого вам нужно изменить фиксированную высоту содержимого вкладки до максимальной высоты, а также использовать относительные единицы:
вход: проверено ~ .tab-content max-height: 50em;
Если вы хотите лучше понять, как работает этот метод, вы можете взглянуть на этот Codepen.
3. Целевой метод
: target является одним из псевдоселекторов CSS3. С его помощью вы можете связать элемент HTML с тегом привязки следующим образом:
Название вкладки
Содержание вкладки
Когда пользователь нажимает на заголовок вкладки, весь раздел открывается благодаря : цель псевдо-селектор, и URL также будет изменен на следующий формат: www.some-url.com/#tab-1.
Открытая вкладка может быть стилизована в CSS с помощью раздел: цель … править. На hongkiat у нас есть отличное руководство о том, как вы можете создавать красивые CSS-аккордеоны только с : цель метод как в вертикальном, так и в горизонтальном расположении.
Основным недостатком : цель метод заключается в том, что он меняет URL, когда пользователь нажимает на вкладки. Это влияет на историю браузера, и кнопка «Назад» браузера не приведет пользователя к предыдущей странице, а к предыдущему состоянию аккордеона..
4. Метод парения
Этот последний недостаток может быть преодолен, если мы используем : парить CSS псевдоселектор вместо : цель, но в этом случае вкладки будут реагировать не на щелчок, а на событие при наведении. Хитрость в том, что вам нужно либо скрыть неприспособленные элементы, или же уменьшить их ширину или высоту - в зависимости от расположения вкладок
Элемент наведения должен быть видимым или установлен на полную ширину / высоту, чтобы заставить аккордеон работать.
Следующие 3 аккордеона только для CSS были сделаны с помощью метода: hover, нажмите на ссылки под скриншотами, чтобы взглянуть на код.
Горизонтальное изображение аккордеона
Перекошенный Аккордеон
Активированный при наведении аккордеон с состоянием по умолчанию
