Меню
Меню (Menu) — виджет, с помощью которого на сайте организуется навигация по страницам.
Виджет помогает создавать и гибко настраивать меню на сайте:
- создавать многоуровневые меню;
- создавать меню горизонтального или вертикального типа, а также в виде колонок;
- адаптировать отображение меню под различные устройства.
Вы можете создавать на странице несколько меню разного вида, например, горизонтальное меню в шапке сайта, а меню в виде колонок - в подвале.
Во вкладке Настройки (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) — по умолчанию в Меню уже созданы несколько пунктов первого уровня. Создать новый пункт можно, нажав на «+» справа от заголовка.
Пункты меню любого уровня можно:
- переименовать;
- переместить, зажав иконку с тремя полосками слева от названия пункта;
- удалить, нажав на «-»;
- изменить настройки действия для пункта, нажав кнопку «молния» слева от его названия.
Для Колоночного меню есть настройка количества колонок, по умолчанию колонок в меню — три.
Вы можете добавлять меню последующих уровней, нажав на «+» справа от заголовка раздела меню. Удалить меню определенного уровня можно, нажав на «-» рядом с его названием.
Для меню любого уровня также можно задать настройки, нажав на кнопку слева от его названия.
Так же, как и для меню первого уровня, в настройках можно указать расположение меню, его тип и т.д. Для добавления пункта меню нажмите на «+» рядом с соответствующим пунктом меню верхнего уровня. Можно также показать или скрыть эти пункты на Холсте, нажав на «глаз».
Для пунктов меню доступны настройки действий:
- Запуск действия (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): слева, справа, вверху или внизу страницы.
