Привет! В данной статье я опишу простой способ реализации мобильного меню с бургером на Элементоре без дополнительных плагинов. Выглядит оно так:
Примем, что основная версия сайта у нас уже готова, и мы находимся на этапе оптимизации мобильных версий. С чего начнем?
1) Настраиваем навигационное меню WordPress.
Убедитесь, что у вас есть рабочее меню с настроенными ссылками. Это могут быть как якори в случае лендинга, так и ссылки на страницы в случае многостраничного сайта.
2) Создаем попап в шаблонах Elementor.
Называем по своему усмотрению. Это стандартный popup Pro-версии Элементора. Далее настраиваем его через конструктор:
3) Настраиваем всплывающее меню.
Прежде всего создаем прозрачную секцию с одной колонкой.
Настройки попап-а, такие как анимация, кнопка закрытия, оверлей и прочее, делаем по желанию. В колонку помещаем стандартное Nav Menu Элементора с такими настройками:
Не забываем указать наше готовое меню ВордПресса в окошке Menu сверху. Типографика, стилизация — также по желанию, тем более, что на смартфонах нет мышки, а значит, что эффекты наведения тут роли не играют.
В целом, отмечу, что настройка полноэкранного попапа здесь крайне проста. Всё что нам нужно — центровать блоки по вертикали и горизонтали, а фон делать 100% по ширине и высоте.
4) Делаем автоматическое закрытие попапа при клике по меню.
Кажется, всё? А вот и нет) Попробуйте нажать на любой пункт с якорем. Переход произошел, а менюшка осталась висеть. После блока меню необходимо вставить блок HTML-кода, чтобы полноэкранное меню закрывалось само по клику на пункт:
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
</script>С попапом завершили. Теперь нужно собрать в Elementor секцию с мобильной кнопкой и настроить её. Допускается множество вариантов расположения в зависимости от дизайна сайта. Я же сделал таким образом:
5) Настраиваем бургер-кнопку для меню.
В качестве базы у нас — обычная кнопка Элементора, только без надписи и фонового цвета.
Если ваш сайт уже использует стандартное Nav Menu Элементора в ПК-версии, то его нужно отключить на планшетах и смартфонах, чтобы менюшки не конфликтовали друг с другом.
Теперь, когда вы всё настроили корректно, у вас будет красивая кнопка со стильным полноэкранным меню как на видео в начале статьи. Не стесняйтесь задавать вопросы и успехов в работе!
