← Назад

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

FAQ

Двухуровневое меню

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

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

0₽

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

+4

месяца

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

+12.000₽

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

+3

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

0₽

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

0₽

месяца

/год

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

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

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

Содержание:

Как устроено меню?
Работа с секцией меню. Основные моменты
Дополнительные настройки
Настройка кнопок основного меню
Настройка двухуровневого меню в мобильной версии
Часто задаваемые вопросы

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

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

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

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

1. Нажмите на "+" чтобы добавить секцию, откройте раздел "Динамические", категория "Меню", и выберите "Двухуровневое меню":

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

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

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

3. Измените название компании в текстовом блоке:

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

Или удалите текстовый блок:

Удаление текстового блока из двухуровневого меню

И перетащите на его место блок "Картинка", загрузите ваш логотип:

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

Совет:
Если вы хотите разместить в одной строке и текстовый блок, и логотип, то просто перетащите внутрь ячейки для контактов блок "Колонки" и разместите нужные элементы внутри колонок.

4. Аналогично в правой части меню (место для контактов):

Отредактируйте блок "Всплывающая форма", либо удалите его и поставьте блок текст, чтобы указать в нём адрес компании:

Редактирование адреса компании в двухуровневом меню

5. Задайте необходимую ширину для поля с логотипом вот здесь:

И точно так же для контактов:

6. Вы можете показать/скрыть определённую часть меню на сайте и в мобильной версии здесь (в настройках пунктов):

Дополнительные настройки

Если вы включите параметр "Растянуть по ширине экрана", то секция будет автоматически растягиваться на всю доступную ширину экрана/вкладки:

А если включить "наложение на следующую секцию", то все элементы меню будут показываться внутри секции, которая у вас идёт сразу после меню.
Обратите внимание, что увидеть это наложение можно будет только в предпросмотре или на запущенном сайте:

Наложение двухуровневого меню на следующую секцию

Чтобы 2 секции (меню и первый экран) выглядели как единое целое, в настройках меню сделайте фон прозрачным:

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

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

Изменения высоты секции двухуровневого меню

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

Когда логотип и контакты настроены, можно перейти к редактированию кнопок навигации. Чтобы перейти в эти настройки откройте раздел "Список пунктов меню":

Пункты меню можно перетаскивать (1), потянув за кнопку с шестью точками,
клонировать (2), удалять (3), настраивать (4) и добавлять новые (5):

• Чтобы перейти к настройке раздела меню, нажмите на 3 точки рядом с ним:

• Поменяйте название пункта (1) и настройте действие (2), которое будет происходить при клике на пункт:

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

Действие "Ссылка"

Подходит, если у пункта нет подпунктов, и необходимо сразу перейти по ссылке. Ссылку можно настроить либо на какую-то страницу вашего сайта (1), либо к якорю (2) (конкретной секции на сайте), либо указать ссылку на какой-то другой сайт (3):

Действие "Выпадающее меню"

Подходит, если нужно разворачивать меню с подпунктами при клике на пункт:

• Каждый подпункт настраивается отдельно:

• Для подпункта можно точно так же настроить ссылку, как и для обычного пункта:

• После того, как все пункты и подпункты заданы, остаётся только изменить внешний вид меню. Делается это в разделе "Дизайн":

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

Изменения положения панели с настройками меню

Готово! Меню настроено в ПК-версии сайта :)
Осталось настроить его в мобильной версии.

Настройка двухуровневого меню в мобильной версии

Чтобы меню хорошо выглядело в мобильной версии сайта, нужно его донастроить в мобильном редакторе.

• Перейдите в него с помощью кнопки в верхнем левом углу редактора: