如何将侧边菜单内容包含在自定义汉堡包图标中？

Question

I managed to get a animated hamburger icon from Codepen on my page (www.elevendozen.com), while the icon does animates, I could not figure out how to include the side nav menu content with it. For example, when the icon is clicked, the menu does not slide out, vice versa.

I'm currently using WP Mobile Menu pluggin but their icon does not animate. Could you help me ? Thanks !

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

</div>

Answer 1

It's a bit confusing, you should be more specific. If I understand correctly your problem is that your menu doesn't show up when you click the icon ?

In your div you have an onclick attribute that should be paired with javascript functions called closeNav() and openNav(). Those functions are here to manage the slide in/out of the menu. Without it, there's no chance to make the menu appear.

When we look at the developper javascript console, we get this error :

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

When we want to open the menu, and also :

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

When we try to close the menu.

If we look at the javascript file at index 92, it says :

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

An addEventListener is here to watch if an event occurs. In this case, a click. If a click occurs, depending if the hamburger got the 'is-active' class, it launches the close or open nav function.

In the closeNav and openNav function, the menu is identified via :

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

I think the problem is here. A getElementById function should target an element with an id. It seems that your menu got the navToShow id. You should do the link between this and the javascript function.

But it's just a suggestion not a definitive answer...