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

Горизонтальное меню

Меню для мобильных устройств

Вы можете создавать на странице несколько меню разного вида, например, горизонтальное меню в шапке сайта, а меню в виде колонок - в подвале.

Меню в виде колонок

Настройки Меню

Во вкладке Настройки (Settings) правой панели доступны следующие настройки:

Основные;
Структура меню.

Основные настройки включают в себя возможность отображения меню для мобильных устройств на разных разрешениях. Передвигая ползунок, вы задаете, с какого разрешения меню будет в виде Бургера и боковой панели. По умолчанию мобильное Меню-Бургер не применено ни к какому разрешению.

Структура Меню по умолчанию содержит пункты меню первого, второго и третьего уровня — Menu (1 lvl.), Menu (2 lvl.), Menu (2 lvl.).

Настройки пунктов меню можно открыть, нажав на кнопку настроек слева от его названия.

В открывшемся окне можно указать следующие настройки:

Расположение (Layout) — определяет структуру пунктов первого уровня: горизонтально, вертикально, колонками;
Тип (Type) — для пунктов первого уровня он может быть только «По умолчанию»;
Показать следующий уровень меню (Show next Menu lvl.). Возможно несколько вариантов: По умолчанию, При наведении (on Hover), По клику (on Click);
Выбрать первый элемент по умолчанию (Select first element by default) — позволяет отображать список пунктов Меню, вложенных в первый пункт любого уровня в Меню для мобильных устройств;
Пункты меню (Items) — по умолчанию в Меню уже созданы несколько пунктов первого уровня. Создать новый пункт можно, нажав на «+» справа от заголовка.

Пункты меню любого уровня можно:

переименовать;
переместить, зажав иконку с тремя полосками слева от названия пункта;

Document image

удалить, нажав на «-»;
изменить настройки действия для пункта, нажав кнопку «молния» слева от его названия.

Для Колоночного меню есть настройка количества колонок, по умолчанию колонок в меню — три.

Меню второго и последующих уровней

Вы можете добавлять меню последующих уровней, нажав на «+» справа от заголовка раздела меню. Удалить меню определенного уровня можно, нажав на «-» рядом с его названием.

Для меню любого уровня также можно задать настройки, нажав на кнопку слева от его названия.

Так же, как и для меню первого уровня, в настройках можно указать расположение меню, его тип и т.д. Для добавления пункта меню нажмите на «+» рядом с соответствующим пунктом меню верхнего уровня. Можно также показать или скрыть эти пункты на Холсте, нажав на «глаз».

Действия для пунктов меню (Action Details)

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

Запуск действия (Action trigger) — предустановленное значение Клик (Click), изменить его нельзя. Действие для пункта меню происходит только по клику на него;
Действие (Action) — определяет действие, которое будет происходить при клике на пункт меню. По умолчанию установлен Переход на страницу (Go to page).

Вы можете установить действие:

Переход по ссылке (Go to link) — в поле Ссылка (Link) введите ссылку, по которой будет осуществляться переход при клике. Можно задать параметр открытия ссылки в новой вкладке;
Переход на страницу (Go to page) — выберите в выпадающем списке страницу проекта, на которую будет осуществляться переход при клике. Можно задать параметр открытия страницы в новой вкладке;
Переход по якорю (Go to anchor) — по кнопке Выбрать элемент (Select element) укажите элемент-якорь на странице (например, секцию), на который будет осуществляться переход при клике;
Отправить электронное письмо (Send mail) — в поле Email введите адрес электронной почты, на которую придет письмо пользователя. При клике на пункт меню с настройкой «Отправить электронное письмо» у пользователя будет открываться приложение для отправки почты;
Телефон (Phone) — в поле Телефон (Phone) введите номер телефона, набор которого будет осуществляться у пользователя при клике. Это действие доступно на мобильных устройствах.

Стили Меню

Вы можете стилизовать Меню, используя вкладку Дизайн правой панели.

Рекомендуется настроить для пунктов меню стили для разных состояний:

При наведении (Hover) — стиль пункта меню при наведении на него курсора мыши;
Активное (Active) — стиль пункта меню в момент клика по нему;
В фокусе (Focus) — стиль пункта меню, получившего фокус

Вы можете установить для разных состояний пункта меню разные цвета шрифта и фона, границы и другие стили. Для более плавного перехода одного стиля в другой используйте эффект Перехода (Transitions) для стилей всех состояний пункта меню.

Стили и настройки мобильного меню (Меню-Бургера)

Переключившись на Холсте на режим отображения, для которого вы установили меню в виде Бургера, вы можете стилизовать мобильное меню.

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

Также вы можете настроить параметры меню во вкладке Настройки на правой панели. В дополнение к уже описанным настройкам, вы можете установить расположение меню (Position): слева, справа, вверху или внизу страницы.