← Назад

Пошаговая инструкция

FAQ

Как настроить многоуровневое меню

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

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Как устроено меню?

Меню делится на 3 части:

1. Зона для логотипа
2. Кнопки меню (для навигации по сайту)
3. Зона для контактов

Зона логотипа и зона контактов представляют из себя слоты для размещения стандартных блоков редактора. Вы можете удалить из них блоки шаблона и добавить свои:

Зоны для логотипа и контактов в многоуровневом меню

Как добавить секцию на сайт?

• Перейдите в редактор сайта, нажмите на кнопку "Добавить секцию":

• Во вкладке "Динамические" выберите категорию "Меню", и нажмите на шаблон "Многоуровневое меню":

Добавление многоуровневого меню в редактор

Секция появится в редакторе:

Отображение многоуровневого меню в редакторе

Обратите внимание:
Правильное отображение секции можно проверить в предпросмотре или на опубликованном сайте.

Работа с секцией. Основные моменты

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

• Вы всегда можете удалить эти блоки и добавить вместо них другие. Если необходимо разместить информацию слева или справа от текста, то сделать это можно с помощью блока "Колонки":

Размещения блока Колонки в слоте для логотипа

• Добавим логотип компании в пустой столбец слева от названия с помощью блока "Картинка":

Размещение блока Картинка внутри блока Колонки

Таким же образом с помощью "Колонок" вы сможете добавить в поле контактов иконки соц.сетей или всплывающую форму обратного звонка.

• Вы можете увеличить ширину зон логотипа и контактов в настройках секции. Чтобы открыть их, нажмите на кнопку в меню секции:

• Справа откроется окно настроек. Во вкладке "Меню" нажмите на кнопку "•••" около пункта "Блок с логотипом" или "Блок с контактами", измените ширину зоны:

Настройки блоков с логотипом и контактами

Теперь рассмотрим остальные настройки секции.

Настройка секции

В окне настроек секции имеется 3 вкладки:

Панель с настройками многоуровневого меню

1. Меню

Здесь находятся общие настройки секции:

• Тип меню — с помощью этой опции можно задать тип отображения меню на сайте, чтобы оно накрывало весь сайт или накладывалось на него в виде баннера

• Расположение контента — эта опция меняет положение кнопок навигации меню - по центру секции или с левой стороны.

• Дизайн меню — опция позволяет настроить цвет фона секции, установить тень и обводку секции, а также настроить отступы от краев секции до контента:

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

• Блок с логотипом, блок с контактами — эти опции мы рассмотрели ранее, с помощью них можно изменить ширину зон логотипа и контактов.

• Растянуть по ширине экрана — опция растягивает секцию на всю доступную ширину экрана/вкладки браузера.

• Раскрывать меню при нажатии — опция позволяет открывать вкладки кликом на пункты меню. Когда опция отключена, они открываются при наведении курсора

Обратите внимание!
В мобильной версии сайта вкладки всегда открываются при клике на пункт меню.

• Раскрывать меню — опция позволяет настроить, в какую сторону будут разворачиваться пункты меню - вниз или вверх. Изменение этого параметра можно увидеть только на опубликованном сайте

Важно!
Если меню закреплено вверху сайта с помощью опции, то оно не сможет разворачиваться вверх:

2. Меню второго уровня

Здесь вы сможете задать:

• Дизайн выпадающего меню — опция отвечает за внешний вид всплывающего окна со списком подпунктов. Вы можете изменить цвет фона этого окна, а также настроить тень, тип обводки и скругление углов окна, задать размер отступов между контентом и краями окна:

• Настройка колонки — здесь можно настроить отступы между столбцами подпунктов (1) и оформление текста заголовков столбцов (2):

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

• Настройки подпунктов — опция позволяет настроить внешний вид контента внутри окна подпунктов - указать оформление карточки с пунктами 2-го и 3-го уровня, задать форматирование для текста внутри них:

Настройка подпунктов многоуровневого меню

• Настройки подпунктов 3 уровня — опция позволяет задать форматирование для текста пунктов 3-го уровня:

3. Список пунктов

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

Открыв вкладку, вы увидите список пунктов, размещенных в меню:

• Здесь вы сможете создать новые пункты меню:

Создание новых пунктов многоуровневого меню

• Клонировать уже имеющиеся:

Клонирование пунктов многоуровневого меню

• Или удалить лишние:

• Нажав на кнопку "•••" справа от нужного пункта, вы попадете в его настройки:

Здесь можно задать:

- Название пункта — его также можно прописать кликнув по тексту в самой кнопке:

- Действие — показ окна с подпунктами или переход по ссылке.

- Вид отображения — на всю ширину экрана или карточка.

Обратите внимание!
Опцию "На всю ширину" следует использовать только в случае, если меню закреплено в верхней части экрана.

- Положение — отвечает за выравнивание окна с подпунктами по отношению к кнопке. Опция доступна только при использовании вида отображения "Карточка".

Редактирование положения пунктов выпадающего меню

- Список колонок — отвечает за количество столбцов с подпунктами в карточке кнопки:

Список колонок с пунктами выпадающего меню

Нажав на кнопку "•••" около нужной колонки, вы сможете перейти в ее настройки:

Настройки колонок с пунктами выпадающего меню

Управление пунктами 2-го и 3-го уровней

После нажатия на кнопку "•••" в списке колонок, откроется окно настроек подпунктов (пунктов 2-го уровня):

В нем вы сможете:

• Выбрать тип содержимого колонки — "подпункты" или "слот".

"Подпункты" позволят настроить выпадающее меню с пунктами 2-го и 3-го уровня внутри карточки:

"Слот" заменит подпункты на место для размещения стандартных блоков редактора, с помощью которых вы сможете выстроить свою структуру меню:

• Кликните по кнопке "•••" около нужного подпункта (пункта 2-го уровня), чтобы перейти в его настройки:

Откроется окно настроек подпункта:

Здесь вы сможете выбрать один из типов оформления подпункта, заменить его заголовок и описание, загрузить свою иконку:

С помощью этой опции можно выбрать действие при нажатии на пункт 2-го уровня — переход по ссылке или открытие списка пунктов 3-го уровня:

Выбор действия при нажатии на пункт 2-го уровня

Ниже находится список пунктов 3-го уровня:

При нажатии на кнопку "•••" откроются настройки пункта 3-го уровня. Здесь вы сможете задать ссылку для перехода:

Выбор действия при нажатии на пункт 3-го уровня

Обратите внимание!

В нижней части окна настроек секции находится кнопка "Сбросить настройки". Она сбрасывает все измененные параметры в секции и откатывает их до состояния, когда секция была только добавлена в редактор.

Часто задаваемые вопросы:

1. Почему ссылки в меню не обновляются после замены адреса сайта/страниц?

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

2. Как растянуть меню по ширине экрана?

Вы сможете сделать это с помощью опции в настройках секции: