ОБЗОР ФУНКЦИЙ

Обзор секций меню

Двухуровневое меню ∙ Мобильное меню

ОБЗОР ФУНКЦИЙ

Обзор секций меню

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

Новое меню отдельно для мобильной версии

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

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

Обратите внимание, что данная секция для удобства настройки будет показываться и в редакторе ПК-версии сайта.

В полной версии сайта (в предпросмотре или на запущенном сайте) эта секция видна не будет, только внутри редактора. Скрывать её от ПК необязательно, секция будет видна только на мобильных.

Закреплять секцию для мобильных или скрывать её от ПК-версии сайта не требуется. Она будет видна только на смартфонах. ;)

Как редактировать пункты меню?

Перейдите в раздел "Контент" и кликните по 3 точкам напротив нужного пункта, отредактируйте текст и выберите, что будет происходить при клике на него:
• переход на другую страницу сайта;
• прокрутка к секции (якорь);
• переход по внешней ссылке.

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

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

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

Эффект стекла

Меню будет выглядеть гораздо интереснее, если включить его. Чтобы это сделать, перейдите в настройки секции — раздел Дизайн, пункт Фон меню и включите "Эффект стекла":

До и после включения эффекта стекла

Что нового в двухуровневом меню?

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

Отображение меню в редакторе сайта

Наложение меню на первый экран

Мы доработали отображение в десктопе. Теперь можно полностью убрать фон у секции и настроить наложение на следующую секцию, если вы хотите, чтобы меню показывалось внутри секции главного экрана, и откреплялось от неё при прокрутке. Давайте посмотрим, как это работает. :)

• Отключаем фон у секции. В разделе "Дизайн — пункт Фон меню" делаем 100% прозрачность параметра "Цвета фона".

• В основных настройках секции включаем "Наложить на следующую секцию". А саму секцию первого экрана можно немного растянуть сверху, чтобы добавить расстояние между элементами меню и контентом.

• Переходим в предпросмотр, чтобы увидеть результат:

Градиент

А ещё вы можете настроить у меню градиент и сделать его полупрозрачным, чтобы оно интереснее смотрелось. Пример:

А потом закрепить меню с градиентом сверху и увидеть результат в предпросмотре:

Логотип в мобильной версии

Теперь можно отображать логотип, даже когда меню не раскрыто. Включается это в редакторе мобильной версии сайта:

Логотип для мобильной версии устанавливается отдельно. Это может быть текст или картинка:

Отображать только бургер

Если подобное оформление вам не подходит, то вы можете вернуться к привычному бургеру, выбрав пункт "Показывать только бургер":

Изменить внешний вид этого бургера можно будет, не выходя из редактора мобильной версии:

Вот так просто можно работать с новыми секциями меню в mottor :)

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

Новые секции открыты в раннем доступе и находятся в категории «Новинки (beta)».