Как сделать так, чтобы исчезло это меню в Wordpress при нажатии на ссылку? - PullRequest
Новая
       36

Как сделать так, чтобы исчезло это меню в Wordpress при нажатии на ссылку?

0 голосов
/ 04 июня 2019

У меня есть вопрос, который, я думаю, довольно прост, но я не могу решить его самостоятельно. Я разрабатываю одностраничный сайт, используя шаблоны WordPress и Pistis.

Дело в том, что меню предопределено как меню бургера, и при нажатии на него вся страница становится серой, и в центре появляется большое меню. Я выложу картинку, чтобы вы ее лучше поняли.

1

Я хочу, чтобы, когда вы щелкаете по любому элементу меню (ссылке), все меню исчезает, показывая веб-сайт, каким он был до того, как кто-либо показывал меню, щелкая значок бургера. Так как это одностраничная страница, она не загружает другую страницу при нажатии, она просто перемещается в нужную часть страницы. Как я могу это сделать, если я могу только добавить немного CSS?

1 Ответ

1 голос
/ 05 июня 2019

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

С этим путем файл, который вынеобходимо отредактировать, чтобы меню автоматически закрывалось при нажатии на любую из ссылок, расположенных здесь: /wp-content/themes/pistis/menu.js.Это код, который обрабатывает меню: 

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

$('.menu-item-2539 a').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

Измените: 

$('.menu-item-2539 a').on('click', function(){

на: 

$('.menu-item a').on('click', function(){

и это должно сделать.

Не забудьте очистить / обновить кеш браузера, чтобы он принял это изменение.

...