Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

4 способа создать удивительные аккордеоны только для CSS

  1. 1. Метод радио-кнопки
  2. Вертикальные вкладки с фиксированной высотой
  3. Изображение Аккордеон с Радио Кнопками
  4. 2. Метод флажка
  5. Флажок фиксированной высоты Аккордеон
  6. Флажок Высота жидкости Аккордеон
  7. 3. Целевой метод
  8. 4. Метод парения

Контентные аккордеоны создают полезный шаблон дизайна. Вы можете использовать их для разных целей: для меню, списков, изображений, выдержек из статей, фрагментов текста и даже видео.

Большинство аккордеонов полагаются на JavaScript, в основном на jQuery , но, поскольку использование передовых методов CSS3 стало широко распространенным, мы также можем найти хорошие примеры, которые используют только HTML и CSS , которые делают их доступными в средах с отключенным JavaScript.

Создание аккордеонов только для CSS может быть сложной задачей, поэтому в этом посте мы попытаемся понять основные концепции, которые используют разработчики, когда им нужно их создать .

При создании вкладок только для CSS обычно есть два основных подхода, каждый из которых имеет два варианта использования. Первый подход использует скрытые элементы формы , а второй использует псевдоселекторы CSS .

1. Метод радио-кнопки

Метод Radio Button добавляет скрытый радиовход и соответствующий ярлык для каждой вкладки аккордеона. Логика проста: когда пользователь выбирает вкладку, он в основном проверяет переключатель, который принадлежит этой вкладке, точно так же, как при заполнении формы. Когда они нажимают на следующую вкладку в аккордеоне, они выбирают следующий переключатель и т. Д.

В этом методе одновременно может быть открыта только одна вкладка . Логика HTML выглядит примерно так:

<div class = "css-only-accordion"> <! - Одна вкладка внутри аккордеона -> <div> <input type = "radio" name = "tab-1" id = "tab-1">> label для = "tab-1"> Название вкладки 1 </ label> <div class = "tab-content"> <h2> Заголовок содержимого (здесь не используйте тег h1) </ h2> <p> Некоторое содержимое .... </ p> p> </ div> </ div> <! - Другие вкладки с одинаковой структурой -> </ div>

Вам нужно добавить отдельную пару радио-меток для каждой вкладки в аккордеоне. Один только HTML не даст желаемого поведения, вам также нужно добавить соответствующие CSS-правила, давайте посмотрим, как этого добиться.

Вертикальные вкладки с фиксированной высотой

В этом решении (см. Скриншот ниже) разработчик скрыл переключатель с помощью дисплея: нет; Правило, затем он дал относительную позицию для метки метки, которая содержит заголовок каждой вкладки, и абсолютную позицию для соответствующей метки: после псевдоэлемента.

Последний содержит маркер, помеченный зеленым знаком +, который открывает вкладки. Закрытые вкладки также используют ручку, отмеченную зелеными знаками «-». В CSS закрытые вкладки выбираются с помощью элемент + элемент селектор.

Вам также нужно придать содержимому открытой вкладки фиксированную высоту. Для этого выберите тело открытой вкладки (помеченное классом tab-content в HTML выше) с помощью element1 ~ element2 CSS селектор.

Основная логика CSS здесь заключается в следующем:

вход [тип = радио] {дисплей: нет; } метка {позиция: относительная; дисплей: блок; } label: after {content: "+"; положение: абсолютное; справа: 1em; } вход: проверено + метка: после {содержание: "-"; } input: проверено ~ .tab-content {height: 150px; }

Вы можете взглянуть на полный CSS здесь на Codepen , CSS изначально написан на Sass, но если вы нажмете кнопку «Просмотр скомпилированного», вы увидите скомпилированный файл CSS.

Контентные аккордеоны создают полезный шаблон дизайна ИЗОБРАЖЕНИЕ: Codepen от Jon Yablonski

Изображение Аккордеон с Радио Кнопками

Этот красивый аккордеон с изображением использует тот же метод переключателя, но вместо меток разработчик использовал HTML-тег figcaption для реализации поведения аккордеона.

CSS несколько отличается, в основном потому, что в этом случае вкладки располагаются не вертикально, а горизонтально. Разработчик использовал CSS + селектор element + element (который использовался в предыдущем случае для выбора переключателей), чтобы гарантировать, что края покрытых изображений все еще остаются видимыми.

ИЗОБРАЖЕНИЕ: Tympanus.net

Прочитайте подробное руководство о том, как создать этот элегантный аккордеон только для CSS.

2. Метод флажка

Метод флажка использует переключатель типа флажка вместо переключателя. Когда пользователь выбирает вкладку, он в основном устанавливает соответствующий флажок.

Разница по сравнению с методом переключателей заключается в том, что можно открывать более одной вкладки одновременно , точно так же , как можно установить несколько флажков внутри формы.

С другой стороны, вкладки не закрываются сами по себе, когда пользователь нажимает на другую. Логика HTML та же, что и раньше, просто в этом случае вам нужно использовать флажок для типа ввода.

<div class = "css-only-accordion"> <! - Одна вкладка внутри аккордеона -> <div> <input type = "checkbox" name = "tab-1" id = "tab-1">> label для = "tab-1"> Название вкладки 1 </ label> <div class = "tab-content"> <h2> Заголовок содержимого (здесь не используйте тег h1) </ h2> <p> Некоторое содержимое .... </ p> p> </ div> </ div> <! - Другие вкладки с одинаковой структурой -> </ div>

Флажок фиксированной высоты Аккордеон

Если вам нужны вкладки с содержимым фиксированной высоты, логика CSS почти такая же, как и в случае с переключателями, просто тип ввода был изменен с переключателя на переключатель. В этом Кодовая ручка Вы можете взглянуть на код.

ИЗОБРАЖЕНИЕ: Codepen от Jon Yablonski ИЗОБРАЖЕНИЕ: Codepen от Jon Yablonski

Флажок Высота жидкости Аккордеон

Когда одновременно открыто несколько вкладок, отображение вкладок с фиксированной высотой может негативно повлиять на пользовательский опыт, поскольку высота гармошки может значительно возрасти. Это можно улучшить, если вы измените фиксированную высоту на высоту жидкости ; это означает, что высота открытых вкладок увеличивается или уменьшается в соответствии с размером содержимого, которое они содержат.

Для этого необходимо изменить фиксированную высоту содержимого вкладки до максимальной высоты и использовать относительные единицы :

вход: проверено ~ .tab-content {max-height: 50em; }

Если вы хотите лучше понять, как работает этот метод, вы можете взглянуть на это Codepen ,

ИЗОБРАЖЕНИЕ: Codepen от Jon Yablonski

3. Целевой метод

: цель является одним из псевдо-селекторов CSS3. С его помощью вы можете связать элемент HTML с тегом привязки следующим образом:

<section id = "tab-1"> <h2> <a href="#tab-1"> </a> Название вкладки </a> </ h2> <p> Содержимое вкладки </ p > </ section>

Когда пользователь нажимает на заголовок вкладки, весь раздел открывается благодаря псевдо-селектору : target , и URL-адрес также будет изменен на следующий формат: www.some-url.com/#tab-1 .

Открытая вкладка может быть стилизована в CSS с помощью правила section: target {…} . У нас есть отличный учебник здесь на hongkiat о том, как вы можете создавать красивые аккордеоны только для CSS с помощью метода : target как в вертикальной, так и в горизонтальной компоновке.

Основным недостатком метода : target является то, что он изменяет URL-адрес, когда пользователь нажимает на вкладки . Это влияет на историю браузера, и кнопка «Назад» браузера не приведет пользователя к предыдущей странице, а к предыдущему состоянию аккордеона.

4. Метод парения

Этот последний недостаток можно преодолеть, если мы используем псевдоселектор CSS : hover вместо : target , но в этом случае вкладки будут реагировать не на щелчок, а на событие наведения мыши. Хитрость в том, что вам нужно либо скрыть невыделенные элементы , либо уменьшить их ширину или высоту - в зависимости от расположения вкладок

Элемент наведения должен быть видимым или установлен на полную ширину / высоту, чтобы заставить аккордеон работать.

Следующие 3 аккордеона только для CSS были созданы методом: hover, нажмите на ссылки под скриншотами, чтобы взглянуть на код.

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

ИЗОБРАЖЕНИЕ: CodePen от vavik

Перекошенный Аккордеон

ИЗОБРАЖЕНИЕ: Codepen от Джеральда Де Леона

Активированный при наведении аккордеон с состоянием по умолчанию

ИЗОБРАЖЕНИЕ: Codepen by Cory

Похожие

Исправлена ​​ошибка, из-за которой аудиоформат не поддерживал формат AC3 в MX Player
... методике, приведенной ниже: МЕТОД - 2 Откройте MX Player и перейдите в Меню> Настройки> Декодер. Прокрутите вниз и нажмите «Пользовательский кодек», на экране появится всплывающее окно выбора. Выберите правильный путь кодека, который вы скачали. После загрузки вашего нового кодека Mx player попросит вас перезапустить приложение. Нажмите «ОК», чтобы
Windows 10 против Windows 7: новейшая ОС Microsoft только что достигла поворотного момента?
Видео: повышение бизнеса для Microsoft Windows 10 target Примерно через два с половиной года после своего выпуска Windows 10 наконец-то обогнала Windows 7 в мире. Это согласно данным веб-аналитической компании StatCounter, которая оценивает долю Windows 10 в компьютерах с Windows в 42,78 процента, опередив Windows 7 в 41,86 процента. Windows 10, выпущенная в июле 2015 года, выросла с 32,84 процента в январе 2017 года, а Windows 7 снизилась с 47,46 процента
7+ Аккордеонных Плагинов WordPress (Бесплатно и Платно)
Аккордеонные плагины WordPress придадут удивительный вид вашему сайту. Он предоставляет некоторые анимации для кнопок, а также вкладок на сайте. Главное, для чего он действительно используется? Аккордеон используется, чтобы скрыть HTML-контент вашего сайта. Когда вы нажимаете
Установить и обновить браузер Chrome в Linux
... страница будет обновляться при каждом выпуске Google Chrome. 2) Google Chrome больше не предоставляет 32-битные пакеты а также удалено 32-битное репо. Если в вашей системе установлена ​​32-разрядная версия, вы можете использовать ее, но больше не будете получать обновления. Веб-браузер является важным программным обеспечением на нашем компьютере.
Как использовать два WhatsApp в одном iPhone (поддерживается iOS 12)
За прошедшие годы WhatsApp стал одним из самых популярных приложений для обмена сообщениями. Это не только облегчает обмен текстовыми сообщениями, но и кроссплатформенное приложение, которое делает общение между пользователями iOS и Android довольно простым. В результате этого WhatsApp теперь является одним из наиболее часто используемых приложений на рынке, но в нем отсутствует одна вещь - поддержка нескольких учетных записей. Наличие двух учетных записей WhatsApp может быть полезным. Например,
... метод, уже включают Slack, Evernote или Telegram. В переводе с ботаника на человека это означает, что эти ги...
... метод, уже включают Slack, Evernote или Telegram. В переводе с ботаника на человека это означает, что эти гибридные приложения Win32 получают множество преимуществ приложений UWP, включая безопасность, изоляцию от системы, простое управление и даже активные плитки, но они все еще являются программами, написанными по-старому. Поэтому часто возникают проблемы с масштабированием или настройкой потребности в системных ресурсах. Другими словами, этот механизм делает идею
Веб-сервисы RESTful
книга от Леонард Ричардсон а также Сэм Руби Уведомление об устаревании: веб-службы RESTful были заменены новой книгой 2013 года RESTful веб-API , Вы

Комментарии

Но нужно ли вам беспокоиться, если у вас есть только Защитник Windows?
Но нужно ли вам беспокоиться, если у вас есть только Защитник Windows? Нет, больше нет. Тем не менее, вредоносная среда постоянно меняется, и мы будем следить за развитием событий, которые предполагают обратное. Эта статья была впервые опубликована в феврале 2017 года и была обновлена ​​в феврале 2019 года. Эта статья полезна? да нет Полное руководство по
Но с такой жесткой ценой Motorola предлагает преимущества для высоты?
Но с такой жесткой ценой Motorola предлагает преимущества для высоты? Ответ в этом тесте! Содержимое коробки С ценой 169 евро, не ожидайте чудес, Moto G предпринимает самый минимум: Белый комплект громкой связи с одной кнопкой, чтобы поднять / повесить и играть / пауза Адаптер переменного тока с microUSB 2.0 Технические характеристики Владелец тур Терминалам начального уровня повезло хранить экраны

Главное, для чего он действительно используется?
Но нужно ли вам беспокоиться, если у вас есть только Защитник Windows?
Эта статья полезна?
Но с такой жесткой ценой Motorola предлагает преимущества для высоты?