Закрыть мобильное боковое меню по клику

Содержание

Вопрос или проблема
Ответ или решение
Описание проблемы
Шаги решения проблемы
Обновленный код
Подробное объяснение
Заключение

Вопрос или проблема

Я использую тему Create от Themetrust и обратился на их форумы, но не получил ответа. Я использую слайд-меню с плавной прокруткой, связывание/прокрутка работает хорошо. На данный момент слайд-меню закрывается только при нажатии на икс. Когда я нажимаю на ссылку меню, плавная прокрутка происходит правильно, но меню остается открытым. Я хотел бы, чтобы меню закрывалось так же, как и при нажатии на икс.

В приведенном ниже коде я попробовал заменить ‘#menu-toggle-close’ на ‘#slide-panel’. Это, похоже, работает в измененных мобильных браузерах, но не на реальном мобильном устройстве. Буду признателен за любые советы.

Вот HTML:

<div id="slide-panel">
    <div class="hidden-scroll">
        <div class="inner has-mobile-menu">

            <nav id="slide-mobile-menu" class="menu-one-page-menu-container"><ul id="menu-one-page-menu" class="collapse sidebar"><li id="menu-item-1274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1274"><a href="#our-approach" data-ps2id-api="true">Наш подход</a></li>

Вот функция:

function initSlideMenu(){
var siteContainer = $j('#site-wrap');
slideMenu = $j('#slide-panel');
slideMenuWidth = slideMenu.outerWidth();
$j('.menu-toggle.open').on('click', function () {
    slideMenu.css('transform', 'translateX(0)');        
});
$j('#menu-toggle-close').on('click', function () {      
    slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)');     
});
var browserWidth = $j(window).width();
if(isMobile.any() && browserWidth < 768) {
    var browserWidth = $j(window).width();
    slideMenuWidth = browserWidth;
    slideMenu.css('width', browserWidth + 'px');
}
slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)'); 
slideMenu.css('visibility', 'visible');

}

Я смог найти ответ на это, предоставленный @malihu, автором плагина для прокрутки по идентификатору страницы – как отметил @malihu, я использовал одностраничное меню для своей темы, и функция клика для прокрутки не привязана к странице. Этот код связывает действие меню с прокруткой, а не только со ссылкой на страницу.

Мобильное меню не закрывается автоматически при нажатии на ссылку меню @malihu

<script> 
(function($){
    $(window).on("load",function(){         $("body").on("click","#slide-mobile-menu .menu-item a[href*='#']",function(){$("#menu-toggle-close")[0].click();});     }); })(jQuery); </script>

Ответ или решение

Чтобы закрыть мобильное меню при нажатии на элемент меню в вашей WP-теме Create от Themetrust, вам потребуется немного доработать ваш JavaScript-код. На данный момент меню закрывается только при нажатии на иконку "x", что вызывает определенные неудобства для пользователей.

Ваша задача – связать действие закрытия меню с кликами на элементы меню, чтобы оно закрывалось так же плавно, как и при нажатии на кнопку закрытия. Вот как это можно сделать.

Описание проблемы

Вы используете мобильное меню с плавной прокруткой, и при нажатии на ссылку меню плавная прокрутка работает правильно, но меню остается открытым. Для полноценной работы меню вы хотите, чтобы оно закрывалось в том же стиле, что и при нажатии на иконку закрытия.

Шаги решения проблемы

Добавьте обработчик событий для элементов меню. Вам нужно будет добавить jQuery код, который будет отслеживать клики на элементах вашего мобильного меню и закрывать его.
Функция закрытия меню. Вы можете использовать уже существующую функцию для закрытия меню через клик по иконке, добавив вызов этой функции в ваши обработчики событий для меню.

Обновленный код

Ниже приводится обновленный код с комментариями:

<script>
(function($) {
    $(window).on("load", function() {
        var slideMenu = $('#slide-panel');
        var slideMenuWidth = slideMenu.outerWidth();

        // Открытие меню при клике на кнопку
        $('.menu-toggle.open').on('click', function() {
            slideMenu.css('transform', 'translateX(0)');
        });

        // Закрытие меню при клике на кнопку "x"
        $('#menu-toggle-close').on('click', function() {
            closeMenu();
        });

        // Закрытие меню при клике на элементы меню, если это якорные ссылки
        $('body').on('click', '#slide-mobile-menu .menu-item a[href*="#"]', function() {
            closeMenu();
        });

        function closeMenu() {
            slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)');
        }

        // Установка ширины и начальное состояние меню
        var browserWidth = $(window).width();
        if (isMobile.any() && browserWidth < 768) {
            slideMenuWidth = browserWidth;
            slideMenu.css('width', browserWidth + 'px');
        }
        slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)');
        slideMenu.css('visibility', 'visible');
    });
})(jQuery);
</script>

Подробное объяснение

Открытие меню: У вас уже есть обработчик для кнопки открытия меню. Он работает правильно, и мы его оставляем без изменений.
Закрытие меню: Мы создали функцию closeMenu(), которая закрывает меню. Эту функцию мы вызываем как при нажатии на иконку "x", так и при клике на элементы меню.
Слежение за элементами меню: Мы используем jQuery-селектор, который выбирает ссылки с якорями (т.е. ссылки с href, содержащими #) внутри вашего мобильного меню. Это позволяет поддерживать роль кликов на элементы меню как закрытие меню.

Заключение

Теперь ваше мобильное меню будет закрываться при нажатии на элементы меню, что значительно улучшит пользовательский опыт. Убедитесь, что вы протестировали изменения на реальных мобильных устройствах, чтобы проверить работоспособность и плавность анимации.

Также не забудьте учесть кэширование браузера; для его обновления может потребоваться перезагрузка страницы или сброс кэша для применения изменений.