1

Подскажите, пожалуйста, как сделать чтобы закрывалось меню в мобильной версии, если нажать на ссылку в меню которая ведет именно на id (например href="#contacts"), переходит на пункт на странице, но не закрывается меню.. Если же на обычную ссылку идти то, меню закрывается.. Буду очень благодарен!

<!-- index.html -->

    <!-- mobile navbar -->
            <div class="kf-navbar-mobile">
        
                <!-- mobile menu -->
                <div class="kf-main-menu">
                    <ul>
                        <li><a href="#">Главная</a></li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Услуги</a></li>
                        <li><a href="#">Наши преимущество</a></li>
                        <li><a href="#contacts">Контакты</a></li>
                    </ul>
                </div>
Что тут именно нужно добавить, подскажите, пожалуйста...

/*
    Header Sticky
*/
if($('.kf-header').length) {
    $(window).on('scroll', function(){
        if ( $(window).scrollTop() > 48 ) {
            $('.kf-header').addClass('fixed');
        } else {
            $('.kf-header').removeClass('fixed');
        }
    });
}
if(!$('.kf-started-inner .kf-parallax-bg').length && !$('.kf-started-slider').length) {
    $('.kf-navbar').addClass('inner-navbar');
}

/*
    Header Menu Button
*/
$('.kf-header').on('click', '.kf-menu-btn', function(){
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
        $('.kf-header').removeClass('show');
        $('.kf-header').addClass('no-touch');
        setTimeout(function(){
            $('.kf-header').removeClass('animated');
        }, 500);
        setTimeout(function(){
            $('.kf-header').removeClass('opened');
            $('.kf-header').removeClass('no-touch');
        }, 1000);
    }
    else {
        $(this).addClass('active');
        $('.kf-header').addClass('animated');
        $('.kf-header').addClass('no-touch');
        setTimeout(function(){
            $('.kf-header').addClass('opened');
        }, 500);
        setTimeout(function(){
            $('.kf-header').addClass('show');
            $('.kf-header').removeClass('no-touch');
        }, 1000);
    }
    return false;
});
4
  • Есть мнение, что без javascript не получится. Так как если вы переходите по якорю в рамках одной страницы, перезагрузки страницы не происходит. Но сейчас придут старшие товарищи и всё расскажут.
    – Quazimorda
    15 ноя 2022 в 6:22
  • Отобразите нормально работающий CSS + HTML. ЧТо б понимать как срабатывает меню, тогда решение найти будет много проще 15 ноя 2022 в 7:22
  • codepen.io/topicstarter/pen/xxzLEgL может быть так? 15 ноя 2022 в 12:23
  • изменено.. прошу также помощи. 15 ноя 2022 в 20:24

1 ответ 1

0

Добавил в JS следующий код.. Не знаю альтернативу..

/*
    Header Menu Button Closed (RCH)
*/
$('.kf-header').on('click', '.kf-navbar-mobile', function(){
        $('.kf-menu-btn').removeClass('active');
        $('.kf-header').removeClass('show');
        setTimeout(function(){
            $('.kf-header').removeClass('animated');
        }, 500);
        setTimeout(function(){
            $('.kf-header').removeClass('opened');
            $('.kf-header').removeClass('no-touch');
        }, 1000);
    });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.