Мобильное меню закрытия на клик.

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

TBH, мне не очень хорошо, когда дело доходит до кодирования, я использую свои базовые знания css, html и php, чтобы сделать несколько приятных сайтов для Wordpress для моих друзей.

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

Это сайт, на котором я сейчас работаю: http://serwer1652796.home.pl.

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

источник

2016-06-09 Bartek

Вы можете добавить код? –

Я не уверен, но вот строки, связанные с меню, которые я нашел в файлах .js. 1. bootstrap.js http://s33.postimg.org/xpm0oaxan/Zrzut_ekranu_2016_06_09_o_20_00_37.png 2. theme.js http://s33.postimg.org/9zjpx4snj/Zrzut_ekranu_2016_06_09_o_20_01_52.png – Bartek

В файле theme.js в строке 260 есть код, который выглядит следующим образом

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){ 
    event.preventDefault(); 
    smoothScroll(jQuery(this.hash)); 
});

Для того, чтобы закрыть меню, вам нужно добавить некоторые строки для переключения некоторых классов CSS на различные элементы, которые, по-видимому, контролируют видимость меню. Он должен выглядеть следующим образом после нее

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){ 
    event.preventDefault(); 
    smoothScroll(jQuery(this.hash)); 
    jQuery('#nav-toggle').toggleClass('nav-is-visible'); 
    jQuery('.main-navigation .onepress-menu').toggleClass("onepress-menu-mobile"); 
    jQuery('.header-widget').toggleClass("header-widget-mobile"); 
});

Я получил дополнительные линии, чтобы добавить от событий, которые происходят, когда вы вручную закрыть меню с помощью значка X, который можно найти в theme.js на линиях 7, 8 и 9.

источник

2016-06-09 18:07:56 shamsup

Спасибо! Он отлично работает. – Bartek

Я вижу, что ваша тема использует jquery. Вы можете добавить что-то вроде этого в файл footer.php:

<script> 
    $(".onepress-menu li a").on("click", function() { 
    $(".onepress-menu").toggleClass("onepress-menu-mobile"); 
    }); 
</script>

Вы можете увидеть эффект эмулировать здесь:

jsfiddle

источник

2016-06-09 18:18:53

Мобильное меню закрытия на клик.

ответ

Смежные вопросы