Меню-гамбургер – это отличное решение для тех, кто хочет сделать компактное меню для мобильных в виде иконки, которая при клике будет раскрываться и показывать меню полностью.

Готовый Виджет

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

Вставка своего меню в виджет “Меню-гамбургер”

Для случаев, когда у нас есть готовое меню на странице и теперь мы хотим разместить его в виджете “Меню-гамбургер” для мобильных устройств:
 
 Шаг 1. Перетащим в нужное место на странице виджет “Меню-гамбургер
 Шаг 2. Удалим в нем вложенное меню
 Шаг 3. Перетащим наше готовое меню, которое есть на данный момент, в виджет “Меню-гамбургер
 

Настройки виджета “Меню-гамбургер”

Цвет кнопки

Изменяет цвет кнопки, которая открывает и закрывает меню.
 

Размер

Изменяет размер кнопки, которая открывает и закрывает меню.
 

Положение

Задаем положение кнопки слева или справа.
 

Исходный код

В этом разделе есть исходный код виджета и все его настройки.
 

Как создать меню и адаптировать его с помощью мобильного меню

Шаг 1. Создадим меню из виджетов.
  1.1 Добавим на секцию виджет 2 колонки
  1.2 В левую колонку добавим виджет иконка с текстом, а в правую колонку добавим ещё один виджет 3 колонки (если кнопок в меню должно быть больше, то добавляем соответствующее кол-во колонок)
  1.3 В виджет 3 колонки добавим кнопки и настроим “Особое положение кнопок для мобильных устройств” “Растянуть на всю ширину
 Шаг 2. Перетащим из верхней части редактора виджет “Мобильное меню” на секцию.
 Шаг 3. Удалим из виджета “Меню-гамбургер” вложенное обычное меню.
 Шаг 4. Вместо него перетащим наше готовое меню в виджет “Меню-гамбургер”.
 


 
 Шаг 5. Виджет “Иконка с текстом” используем как логотип с названием компании.
 Дублируем виджет и настроим видимость каждого из них для разных устройств.
 


 Адаптивное меню готово! На мобильном устройстве оно будет выглядеть компактно и функционально, а на других устройствах – как обычное меню.

Вы нашли ответ?