Меню

Меню (Menu) — виджет, с помощью которого на сайте организуется навигация по страницам.

Виджет помогает создавать и гибко настраивать меню на сайте:

• создавать многоуровневые меню;

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

Вы можете создать меню следующих видов:

• горизонтальное;
• вертикальное;
• в виде колонок.

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

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

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

• Общие;

• Структура меню.

Общие настройки

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

Например, если установить ползунок на позицию Планшет, то мобильное меню будет отображаться на планшетах и смартфонах в горизонтальной и вертикальной ориентации. А если поставите ползунок в позицию Мобильный телефон портретный режим, — меню-бургер появится только на смартфонах в вертикальной ориентации.

Опция Блокировать прокрутку страницы позволяет отключить возможность прокрутки страницы при открытии мобильного меню.

Структура меню

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

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

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

• Расположение (Layout) — определяет структуру пунктов первого уровня: Горизонтально, Вертикально, Колонками.

• Тип (Type) — задает вид пунктов меню. Для пунктов первого уровня он может быть только «По умолчанию». Для остальных уровней доступны еще два варианта — «Всплывающий список» и «Выпадающий список».

• Выбрать первый элемент по умолчанию (Select first element by default) — включает автоматический выбор первого пункта меню.

• Элементы меню (Items) — по умолчанию в Меню уже добавлены несколько пунктов. Создать новый пункт можно, нажав на «+» справа от заголовка.

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

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

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

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

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

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

В настройках можно указать:

• Расположение — Горизонтально, Вертикально, Колонками.
• Тип — По умолчанию, Всплывающий список, Выпадающий список.
• Анимации — тип эффекта, а также плавность и длительность при открытии и закрытии пунктов меню.

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

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

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

• Триггер действия (Action trigger) — предустановленное значение При клике (Click), изменить его нельзя. Действие для пункта меню происходит только по клику на него.

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

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

• Переход по ссылке (Go to link) — в поле Переход по ссылке (Link) введите ссылку, по которой будет осуществляться переход при клике. Можно задать параметр открытия ссылки в новой вкладке.

  

• Переход на страницу (Go to page) — выберите в выпадающем списке страницу проекта, на которую будет осуществляться переход при клике. Можно задать параметр открытия страницы в новой вкладке.

  

• Переход по якорю (Go to anchor) — нажав кнопку Выбрать элемент (Select element), укажите элемент-якорь на странице (например, секцию), на который будет осуществляться переход при клике. Вы также можете задать скорость скролла до якоря в миллисекундах — Scroll speed.

  

• Отправить e-mail (Send mail) — в поле Email введите адрес электронной почты, на которую придет письмо пользователя. При клике на пункт меню с настройкой «Отправить электронное письмо» у пользователя будет открываться приложение для отправки почты.

  

• Телефон (Phone) — в поле Телефон (Phone) введите номер телефона, набор которого будет осуществляться у пользователя при клике. Это действие доступно на мобильных устройствах.

Стили Меню

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

Выбирайте в слоях или на холсте нужный элемент меню — Menu Item или Menu Link и задавайте ему стили на вкладке Дизайн. Например, вы можете изменить фон пунктов меню или добавить им границы.

Стили меню для разных состояний

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

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

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

Например, чтобы задать стили для пункта меню при наведении:

1. Выберите элемент Menu Link.
2. На вкладке Дизайн добавьте состояние При наведении.

4. Задайте нужный цвет текста, который будет применяться при наведении на пункт меню.

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

Для отрытого и текущего пункта меню также можно задать стили. Подробнее — Стилизация открытого и текущего пунктов меню.

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

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

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

1. Выберите элемент Menu Button в слоях или на холсте.

2. На вкладке Дизайн задайте для него желаемый цвет фона, размер и другие стили. Вы можете скрыть фон по умолчанию, нажав на иконку глаза, и добавить нужный вам цвет фона. Также вы можете заменить иконку бургера в параметре Background Image.

Параметры мобильного меню вы можете задать на вкладке Настройки. Для мобильного меню по умолчанию установлен тип Скользящий. Вы можете также установить Позиционирование (Position), чтобы выбрать, с какой стороны будет раскрываться меню: слева, справа, вверху или внизу страницы.