Как включить содержимое бокового меню в пользовательский значок гамбургера? - PullRequest
Новая
       17

Как включить содержимое бокового меню в пользовательский значок гамбургера?

0 голосов
/ 27 марта 2019

Мне удалось получить анимированный значок гамбургера от Codepen на моей странице (www.elevendozen.com), в то время как значок оживляет, я не мог понять, как включить в него содержимое бокового меню.Например, если щелкнуть значок, меню не выдвигается, и наоборот.

В настоящее время я использую плагин WP Mobile Menu, но их значок не анимируется.Не могли бы вы помочь мне ?Спасибо !

<div id="mob-menu-left-panel mobmenu" class="mobmenu_content" onclick="closeNav()"

</div>

1 Ответ

0 голосов
/ 27 марта 2019

Это немного сбивает с толку, вы должны быть более конкретным.Если я правильно понимаю, ваша проблема в том, что ваше меню не отображается, когда вы нажимаете значок?

В вашем div у вас есть атрибут onclick, который должен быть связан с функциями JavaScript, которые называются closeNav () и openNav ().Эти функции предназначены для управления слайдом в / из меню.Без этого нет никакого шанса заставить меню появиться.

Когда мы смотрим на консоль разработчика JavaScript, мы получаем эту ошибку: 

Uncaught TypeError: Cannot read property 'style' of null
at openNav ((index):81)
at HTMLButtonElement.<anonymous> ((index):92)

Когда мы хотим открыть меню, итакже: 

Uncaught TypeError: Cannot read property 'style' of null
at closeNav ((index):86)
at HTMLButtonElement.<anonymous> ((index):92)

Когда мы пытаемся закрыть меню.

Если мы посмотрим на файл javascript с индексом 92, он говорит: 

hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());

addEventListenerздесь, чтобы посмотреть, если произойдет событие.В этом случае клик.Если происходит щелчок, в зависимости от того, получил ли гамбургер класс «is-active», он запускает функцию закрытия или открытия навигации.

В функциях closeNav и openNav меню определяется с помощью: 

document.getElementById(".mob-menu-slideout-over.show-nav-left .mob-menu-left-panel").style.display = "none";

Я думаю, что проблема здесь.Функция getElementById должна предназначаться для элемента с идентификатором.Похоже, ваше меню получило идентификатор navToShow.Вы должны установить связь между этим и функцией javascript.

Но это всего лишь предположение, а не окончательный ответ ...

...