Как создать вертикальный аккордеон для сайта
Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).
Процесс создания аккордеона
Процесс разработки вертикального аккордеона будет состоять из:
Дизайн аккордеона (скриншот):
HTML код аккордеона и его описание
Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).
Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).
CSS код аккордеона
JavaScript код аккордеона
Сценарий (логика) аккордеона:
Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).
Инициализация элемента как аккордеон выполняется следующим образом:
Аккордеон, заголовки которого отделены друг от друга
Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:
CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):
Аккордеон с анимацией появления
Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:
Стили аккордеона, включающие в себя анимацию (для отображения содержимого):
Вертикальное меню аккордеон
Пример настройки аккордеона в качестве вертикального меню.
Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.
Многоуровневое вертикальное меню аккордеон
Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.
HTML, CSS и JavaScript код многоуровневого меню:
Комментарии:
Александр, доброго времени суток!
Снова нужна ваша помощь. ) В процессе работы представленного меню возникла след. проблема.
Когда впервые заходишь на сайт пункты меню не нажимаются и ни каким образом не раскрываются. Если я обновляю страницу, то все начинает работать как надо (начинают раскрываться пункты). Происходит не каждый раз, а через раз… Помогите пожалуйста победить эту проблему!) Вот сам сайт, где происходит этот баг.
Привет!
Размеры, которые мы устанавливаем в CSS являются виртуальными, не зависящимися от экрана. Например, 1px в CSS может занимать как один физический пиксель, так и четыре (на Retina дисплеях). Физический пиксель — это самый мелкий элемент дисплея.
Когда изменяешь масштаб в браузере, например, устанавливаешь его на 90%, то 1 пиксель в CSS должен как-то отобразиться на экране. Он же не может занять часть физического пикселя. Браузер это процесс рассчитывает и получается, что в одних местах он занимает 1 физический пиксель, а в других ничего.
Как вариант, это установить больший размер:
Аккордеон на CSS
Вариант создания аккордеона на чистом CSS
2 примера создания аккордеона без использования скриптов.
Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Еще описание вкладки
И еще описание вкладки
Обратите внимание, что ID для каждой вкладки должны быть уникальные:
Пример аккордеона с несколькими открытыми вкладками
Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки
Еще описание вкладки
И еще описание вкладки
CSS такой же, как в первом варианте
Смотрите также:
Фиксированное гамбургер-меню
Фиксированное гамбургер-меню на jQuery с анимированным появлением его элементов
Многоуровневое вертикальное меню
Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик
Блочное меню со сменой фона
Меню на графическом фоне, который меняется при выборе каждого пункта
Добавить комментарий:
Комментарии:
Дополнение: если текста больше чем на страницу.
bbobik………………, нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!
Та же проблема, что только не делал — скроллит в конец страницы, плюнул и сделал на jquery из другого примера
Проектирование аккордеонов: юзабилити, паттерны и лучшие практики
Свернутые и развернутые состояния. Использование стилей и цветов. Образцы аккордеона, шаблоны и UX-кейсы для создания удобного опыта
Я онлайн-предприниматель и UI-дизайнер. Прошло более трех лет с тех пор, как я начал создавать наборы интерфейсов для Figma. Так был основан сайт Setproduct.com. Его миссия – помочь компаниям и фрилансерам сэкономить деньги и время на дизайне, выпуская свои продукты намного быстрее.
Я работаю графическим дизайнером более 20 лет. В последние годы я ежедневно просматривал тысячи различных компонентов, экранов и приложений. И я делал это, потому что у меня была цель – написать исчерпывающую книгу по проектированию приложений и их компонентов, шаблонов и т. д.
Я очень рад, что смог наконец начать этот процесс, благодаря чему недавно была опубликована 1-я глава об аватарах. Было приятно получить положительные отзывы в различных социальных сетях, а моя статья упоминалась на нескольких популярных дизайн-ресурсах. Это дало мне мотивацию продолжить начатое дело.
Мне также пришла в голову идея создать опрос, была ли статья полезна для читателей. Результаты было легко отслеживать, поскольку я использовал готовый виджет.
Результаты оказались весьма впечатляющими! Статьей заинтересовались не менее 44 пользователей, которые прочитали ее полностью. И было как минимум двое пользователей, которые не совсем понимали, что происходит 🤣
Хорошо, а теперь перейдем к содержанию статьи. Существует много мелких деталей интерфейса, которые мы рассмотрим подробнее.
👇 Приступим!
Что такое аккордеон?
Аккордеон (известный как Expansion panel) – это список параметров, расположенных вертикально, которые можно развернуть / свернуть, чтобы отобразить или скрыть дополнительный связанный контент.
Основы
Состояния
Состояния по умолчанию для компонента аккордеон следующие:
Размещение иконки шеврона
После нажатия на аккордеон шеврон поворачивается, показывая, что элемент был успешно развернут. При повторном щелчке аккордеон сворачивается, возвращая шеврон в исходное положение.
Вы также можете использовать вместо шеврона эти символы:
Дополнительные символы
В ситуациях, когда аккордеон находится с правой стороны, вы можете использовать дополнительные символы, чтобы подчеркнуть значение. Но будьте осторожны, так как можно перегрузить содержимое компонента.
Вы также можете иногда использовать цвета для визуального разделения элементов:
Стили контейнера
Расширенный элемент
Если используется несколько аккордеонов, необходимо выделить развернутое состояние. Этим мы помогаем пользователю понять, какой элемент аккордеона открыт. Выделение можно стилизовать одним из следующих способов:
Несмотря на то, что возвышение отлично смотрится на белых и светло-серых поверхностях, заполнение фона расширенного элемента аккордеона с непрозрачностью от 8 до 12% является отличным дополнением. Хорошо работает и с белыми поверхностями. При необходимости можно добавить обводку.
Contained аккордеон
В подавляющем большинстве случаев вы можете захотеть использовать contained аккордеон. Разделите его элементы едва заметным разделителем. Такой подход позволит сэкономить немного места по вертикали.
Аккордеон с разделением
Иногда аккордеоны можно разделить значительным пространством. Такой подход хорош, когда не нужно экономить вертикальное пространство.
Юзабилити аккордеона
Подзаголовок
Подзаголовки – хорошее решение для информирования пользователя о том, чего ожидать, прежде чем он раскроет аккордеон. С помощью подзаголовков вы также можете показать выбор пользователя, когда аккордеон свернут.
Бейдж
Бейдж – это еще один способ показать информацию о том, сколько элементов выбрано, когда аккордеон свернут.
Вспомогательный текст
Эта функция полезна для органического отображения выбора пользователя, когда аккордеон свернут. Это особенно актуально для мобильных дизайнов.
Паттерны для мобильных дизайнов
На всю ширину
Наиболее распространенной практикой является использование полноразмерных аккордеонов.
Боковое меню
Чтобы открывать элементы подменю, интегрируйте аккордеон в Navigation drawer.
Фильтры
Использование боковых панелей вместе с аккордеоном является наиболее распространенным паттерном для реализации фильтров, свойств и многого другого.
Паттерны для десктопных дизайнов
Боковое меню
Подобно мобильным сайтам, вы можете использовать боковую навигацию на основе аккордеонов для дашбордов, десктопных приложений и т. д.
Фильтры
В зависимости от структуры вашего макета, аккордеон (например, фильтры) можно расположить слева или справа.
Ссылки по теме
На сегодня все. Надеюсь, эта информация окажется для вас полезной при проектировании аккордеонов.
И если вы хотите использовать представленные в статье аккордеоны – смело дублируйте их для Figma.
Я надеюсь, что это исследование поможет улучшить UX ваших приложений. В следующей главе мы поговорим о панелях приложений.
Я что-то упустил? Пожалуйста, пишите в комментариях 💬.
Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary
Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:
С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.
К сожалению, у дефолтного маркера есть два недостатка:
Рассмотрим первый пример Details/Summary с измененным текстовым маркером:
Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before
summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.
Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.
Текстовый маркер справа + простейшая анимация текста и маркера:
В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.
Анимация маркера при помощи transform: scale(1,-1);
Svg маркер + анимация поворота:
Summary:before пришлось серьезно переделать:
Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.
Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.
Для summary поставить padding-right: 1.5em;
Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:
Svg маркер справа + эффект зеркального поворота стрелки:
Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.
Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.
Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.
С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio
Компонент Аккордеон Accordion
Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Горизонтальный выпадающий список аккордеон для раскрытия блоков с необходимой информацией внутри.
В созданном аккордеоне, при нажатии (клике) на заголовок элемента, каждый элемент может быть «развёрнут» или «раскрыт», что в свою очередь отобразит информационное содержание связанное с этим элементом.
Универсальный аккордеон может пригодиться:
Основы. Подключение
Содержимое блока 1. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Какой-то ответ.Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Очередной ответ. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Открытая вкладка
Делаем одну вкладку открытой по умолчанию
Ниже расположен простой пример аккордеона с открытой вкладой по умолчанию.
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент UIkit 3.
Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Множественное раскрытие
Несколько открытых позиций без сворачивания
Делаем несколько открытых позиций при нажатии на заголовок:
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Произвольный элемент
Раскрытие произвольного элемента
Например, чтобы показать третий элемент, необходимо установить active: 2 (индекс начинается с нуля).
Третий элемент открыт по умолчанию. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Третий элемент открыт по умолчанию. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Открытый текст с содержанием. Крутой фреймворк UIkit. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.
Параметры для атрибута
При использовании компонента Accordion к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Моментальное открытие отзывчивого аккордеона без паузы. Разница отлично видна, если обратить внимание на соседний пример Аккордеон с длительным открытием.
Описание: Разница отлично чувствуется, если смотреть на соседний пример. Разница отлично видна, если сравнивать с соседним примером. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Пример с увеличенной продолжительностью движения, с длительным открытием содержимого при нажатии на заголовок. Значение продолжительности установлено: 900 миллисекунд. Разница хорошо заметна, если обратить внимание на соседний пример Аккордеон без анимации.
Описание внутри. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
По умолчанию вкладки аккордеона с содержимым можно закрыть все без исключения. В данном примере одна вкладка будет открыта всегда в любом случае.
Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
События
Следующие события будут инициированы для элементов компонента «Accordion»:
Методы
Для компонента «Accordion» доступны следующие методы:
