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