Такое меню будет закреплено в нижней части экрана, как во многих популярных приложениях:
Обратите внимание, что данная секция для удобства настройки будет показываться и в редакторе ПК-версии сайта.
В полной версии сайта (в предпросмотре или на запущенном сайте) эта секция видна не будет, только внутри редактора. Скрывать её от ПК необязательно, секция будет видна только на мобильных.
Закреплять секцию для мобильных или скрывать её от ПК-версии сайта не требуется. Она будет видна только на смартфонах. ;)
Перейдите в раздел "Контент" и кликните по 3 точкам напротив нужного пункта, отредактируйте текст и выберите, что будет происходить при клике на него:
• переход на другую страницу сайта;
• прокрутка к секции (якорь);
• переход по внешней ссылке.
Иконки пунктов меняются там же, а цвет иконок вы можете поменять в разделе "Дизайн":
Менять порядок пунктов можно, потянув за полосы напротив названия раздела, а удалять лишние — кликнув по значку корзины:
Меню будет выглядеть гораздо интереснее, если включить его. Чтобы это сделать, перейдите в настройки секции — раздел Дизайн, пункт Фон меню и включите "Эффект стекла":
Сейчас в редакторе данная секция будет отображаться с клетчатым фоном под ней, не обращайте внимания. Это сделано для того, чтобы код самого меню не конфликтовал с кодом редактора. В режиме предпросмотра и на запущенном сайте секция будет показываться корректно, без клетки снизу. :)
Мы доработали отображение в десктопе. Теперь можно полностью убрать фон у секции и настроить наложение на следующую секцию, если вы хотите, чтобы меню показывалось внутри секции главного экрана, и откреплялось от неё при прокрутке. Давайте посмотрим, как это работает. :)
• Отключаем фон у секции. В разделе "Дизайн — пункт Фон меню" делаем 100% прозрачность параметра "Цвета фона".
• В основных настройках секции включаем "Наложить на следующую секцию". А саму секцию первого экрана можно немного растянуть сверху, чтобы добавить расстояние между элементами меню и контентом.
• Переходим в предпросмотр, чтобы увидеть результат:
А ещё вы можете настроить у меню градиент и сделать его полупрозрачным, чтобы оно интереснее смотрелось. Пример:
А потом закрепить меню с градиентом сверху и увидеть результат в предпросмотре:
Теперь можно отображать логотип, даже когда меню не раскрыто. Включается это в редакторе мобильной версии сайта:
Логотип для мобильной версии устанавливается отдельно. Это может быть текст или картинка:
Если подобное оформление вам не подходит, то вы можете вернуться к привычному бургеру, выбрав пункт "Показывать только бургер":
Изменить внешний вид этого бургера можно будет, не выходя из редактора мобильной версии:
Вот так просто можно работать с новыми секциями меню в mottor :)
Новые секции открыты в раннем доступе и находятся в категории «Новинки (beta)».