Создание пользовательского аккордеона - помощь Webflow

Как добавить элемент выпадающего списка

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

Вы можете добавить элемент выпадающего списка на свой сайт, перейдя в Панель добавления (A) > Элементы > Дополнительно и перетащив элемент выпадающего списка на холст.

Как изменить стили выпадающего списка по умолчанию

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

Чтобы изменить стили выпадающего списка по умолчанию:

1. Выберите родительский элемент выпадающего списка на холсте Дизайнера (присвоен класс “Элемент аккордеона” для этого примера)
2. Перейдите в Панель стилей > Размер
3. Установите Ширину на 100%

Как настроить переключатель выпадающего списка

Теперь вам нужно настроить ваш переключатель выпадающего списка, чтобы он полностью заполнял родительский элемент и скрывал содержимое внутри списка, когда аккордеон закрыт. Настройте свойства отображения и высоты переключателя выпадающего списка:

1. Выберите переключатель выпадающего списка на холсте и присвойте ему класс (например, “Переключатель аккордеона”)
2. Перейдите в Панель стилей > Макет
3. Установите Отображение на flexbox, чтобы заполнить горизонтальное пространство
4. Установите Выравнивание на центр, чтобы вертикально центрировать текст
5. Перейдите в Панель стилей > Размер
6. Установите значение Высоты (например, 80px)

Как стилизовать ваш аккордеон

Если вы просматриваете свой сайт и нажимаете на аккордеон, вы можете заметить, что аккордеон открывается, но содержимое по умолчанию накладывается на окружающее содержимое. Это происходит потому, что стиль position для выпадающего списка по умолчанию — absolute. Вам нужно изменить его, чтобы содержимое расширялось и сдвигало окружающие элементы.

Чтобы стилизовать ваш аккордеон:

1. Выберите родительский элемент dropdown (например, “Элемент аккордеона”)
2. Нажмите на иконку “шестеренка”, чтобы открыть настройки Dropdown и показать Меню
3. Выберите элемент Dropdown list
4. Перейдите в Панель стилей > Позиция
5. Установите Позицию на static
6. Выберите родительский элемент dropdown (“Элемент аккордеона”)
7. Перейдите в Панель стилей > Размер
8. Установите Переполнение на hidden

Как создать вашу пользовательскую анимацию

Создайте пользовательскую анимацию, которая открывает и закрывает ваш пользовательский аккордеон:

• Создать начальные действия
• Анимировать открытие аккордеона
• Анимировать закрытие аккордеона

Создать начальные действия

Вы начнете с создания двух начальных действий для вашего аккордеона.

Для вашего dropdown:

1. Выберите элемент dropdown (“Элемент аккордеона”)
2. Перейдите в Панель взаимодействий > Триггер элемента и создайте новый триггер элемента
3. Выберите Dropdown opens
4. Выберите действие под Меню открывается
5. Выберите Начать анимацию под Пользовательская анимация
6. Создайте анимацию с таймером и назовите ее (например, “Аккордеон открывается”)
7. Добавьте действие в вашу анимацию: Размер под Разное
8. Установите как начальное состояние
9. Введите значение высоты (например, 80px)
10. Сохраните

Для вашего значка переключения:

1. Выберите Иконку в элементе dropdown
2. Присвойте вашему значку класс (например, “Иконка аккордеона”)
3. Выберите родительский элемент dropdown
4. Откройте Панель взаимодействий
5. Выберите взаимодействие Dropdown opens
6. Отредактируйте анимацию с таймером (“Аккордеон открывается”)
7. Выберите значок (“Иконка аккордеона”)
8. Добавьте действие: Поворот под Трансформация
9. Установите как начальное состояние
10. Установите z-ось на 0 градусов
11. Сохраните

Анимация открытия аккордеона

Чтобы открыть аккордеон и повернуть иконку:

1. Выберите родительский элемент выпадающего списка
2. Откройте панель взаимодействий
3. Выберите взаимодействие Dropdown opens
4. Отредактируйте анимацию по времени (“Аккордеон открывается”)
5. Добавьте действие: Размер в разделе Разное
6. Снимите галочку с начального состояния
7. Введите “auto” для высоты
8. Выберите иконку (“Иконка аккордеона”)
9. Добавьте действие (в то же время): Поворот в разделе Трансформация
10. Установите ось z на 180 градусов
11. Сохраните

Анимация закрытия аккордеона

Чтобы анимировать закрытие:

1. Выберите родительский элемент выпадающего списка (“Элемент аккордеона”)
2. Откройте панель взаимодействий
3. Выберите взаимодействие Dropdown opens
4. Выберите действие в разделе Меню закрывается
5. Выберите Начать анимацию
6. Создайте анимацию по времени и назовите ее (например, “Аккордеон закрывается”)
7. Добавьте действие: Размер в разделе Разное
8. Введите значение высоты (например, 80px)
9. Выберите иконку
10. Добавьте действие (в то же время): Поворот в разделе Трансформация
11. Установите ось z на 0 градусов
12. Сохраните

Назад к помощи webflow