Совет: используйте мобильное меню

Содержание:

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

 

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

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

00000047 (1)

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

Для случаев, когда у нас есть готовое меню на странице и теперь мы хотим разместить его в виджете “Меню-гамбургер” для мобильных устройств:

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

00000057 (1)

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

Цвет кнопки

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

1000015

Размер

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

1000016

Положение

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

1000017

Исходный код

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

1000018

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

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

00000048 (1)

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

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

Была ли эта статья полезна?

Похожие статьи