Редактор Studio: дизайн выпадающих списков в меню
7 мин. чтения
После добавления и настройки выпадающего списка, вы можете настроить его дизайн. Измените внешний вид и выравнивание как контейнера, так и меню, чтобы создать индивидуальное оформление для клиентов и укрепить их бренд.
Прежде чем начать:
Выпадающие списки можно добавить только к новым меню в редакторе Studio. Если у вас предыдущий интерфейс меню, вы можете создавать подменю и добавлять выпадающие меню.
Настройка макета выпадающего списка
В зависимости от типа меню (панель навигации, гамбургер-меню и т. д.) вы можете использовать панель «Макет», чтобы установить отображение или ширину выпадающего списка. Вы также можете настроить интервал и выравнивание, чтобы они соответствовали внешнему виду главного меню.
Чтобы настроить макет выпадающего списка:
- Перейдите в редактор.
- Нажмите на меню / кнопку меню.
- (Гамбургер-меню) Нажмите Изменить, чтобы открыть режим редактирования гамбургер-меню, и выберите меню.
- Нажмите на значок Макет
.
- Выберите вкладку Выпадающий список.
- Используйте следующие параметры, чтобы настроить макет:
- Ширина контейнера Выберите ширину контейнера выпадающего списка и настройте ее по своему усмотрению:
- Растягивание: контейнер выпадающего списка растянется на всю ширину экрана. Вы можете отрегулировать его ширину, установив поля (в пикселях).
- По размеру меню: выпадающий список будет той же ширины, что и главное родительское меню.
- Адаптировать по содержимому: контейнер «облегает» пункты выпадающего списка. Вы можете выбрать, выровнять ли его по левому краю, центру или по правому краю главного меню.
- Отображение элементов: выберите, будут ли элементы меню в раскрывающемся списке свернутые или всегда развернутые.
- Интервал над контейнером: увеличьте или уменьшите пробел между выпадающим списком и главным меню.
- Кол-во столбцов: выберите количество столбцов, которое будет отображаться в выпадающем меню.
- Интервал: отрегулируйте интервал между пунктами в выпадающем меню. Если вы добавили подпункты, вы также можете изменить интервал между и над ними.
- Интервал между пунктами: введите интервал по горизонтали и вертикали между пунктами выпадающего списка.
- Интервал между подпунктами: увеличьте или уменьшите расстояние между подпунктами.
- Интервал над подпунктами: выберите интервал над подпунктами в меню.
- Отступы: настройте расстояние вокруг каждой части выпадающего списка:
- Отступ пункта: увеличьте или уменьшите расстояние вокруг пунктов раскрывающегося меню.
- Отступ подпункта: отрегулируйте расстояние вокруг подпунктов в раскрывающемся меню.
- Отступы контейнера: увеличьте или уменьшите расстояние вокруг контейнера выпадающего списка.
- Выравнивание: выровняйте элементы и подпункты выпадающего списка по левому краю, правому краю или по центру контейнера.
- Ширина контейнера Выберите ширину контейнера выпадающего списка и настройте ее по своему усмотрению:
Примечание:
Отображаемые параметры зависят от типа меню (панель навигации или гамбургер-меню) и выбранной вами ориентации (горизонтальной или вертикальной).
Настройка дизайна выпадающих списков
Вы можете настроить каждую часть выпадающего списка так, чтобы она соответствовала внешнему виду главного меню - от контейнеров до подпунктов.
Чтобы настроить дизайн раскрывающихся списков:
- Перейдите в редактор.
- Нажмите на меню / кнопку меню.
- (Гамбургер-меню) Нажмите Изменить, чтобы открыть режим редактирования гамбургер-меню, и выберите меню.
- Нажмите стрелку Открыть инспектор
в правом верхнем углу редактора. - Прокрутите вниз до раздела Дизайн.
- Выберите элемент, дизайн которого хотите настроить.
- Контейнер выпадающего списка
- Контейнер выпадающего меню
- Пункты выпадающего списка
- Подпункты выпадающего списка
- (Пункты выпадающего списка / подпункты выпадающего списка) Выберите соответствующее состояние: В покое, При наведении или Текущая страница.
- Настройте выпадающий список, используя доступные параметры:
- Заливки фона: измените цвет фона выпадающего списка или добавьте привлекательный градиент. Вы можете настроить прозрачность и добавить несколько слоев в соответствии с вашим дизайном.
- Границы: отрегулируйте ширину и цвет границ выпадающего списка.
- Уголки: сделайте уголки выпадающего списка более круглыми или прямоугольными, отрегулировав радиус.
- Текст: настройте стиль и форматирование пунктов и подпунктов выпадающего списка.
- Тени: добавьте тени к выпадающему списку и настройте ее угол, цвет, расстояние и многое другое.
В чем разница между контейнерами?
- Контейнер выпадающего списка: здесь отображаются все элементы и меню, которые вы добавили в выпадающий список.
- Контейнер выпадающего меню: здесь отображаются только пункты выпадающего меню. Они вложены в контейнер выпадающего списка.
Индивидуальная настройка дизайна выпадающих списков
Изменения, которые вы вносите в дизайн и макет выпадающего списка, применяются ко всем выпадающим спискам в меню. Однако вы можете «открепить» раскрывающиеся списки в меню горизонтальной панели навигации, чтобы настроить их отдельно.
Примечание:
Этот параметр недоступен в гамбургер-меню и меню с вертикальной панелью навигации.
Чтобы открепить и настроить отдельные выпадающие списки:
- Нажмите на горизонтальное меню в редакторе.
- Нажмите Управлять меню.
- Наведите курсор на нужный раскрывающийся список и нажмите Изменить.
- Выберите, как вы хотите настроить дизайн выпадающего списка:
Настройте макет контейнера
Настройте макет выпадающего меню
Настройте дизайн контейнера
Настройте дизайн меню:
Примечание:
Переключатели Отредактируйте только этот выпадающий список в инспекторе подключены к панели «Макет», что означает, что отключение / включение одного переключателя автоматически отключает / включает другой.