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

Question

我设法在我的页面（www.elevendozen.com）上从Codepen获得一个动画汉堡包图标，而图标确实动画，我无法弄清楚如何包含侧面导航菜单内容。例如，单击图标时，菜单不会滑出，反之亦然。

我目前正在使用WP Mobile Menu插件，但它们的图标没有动画效果。你可以帮帮我吗 ？谢谢 ！

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

</div>

Answer 1

这有点令人困惑，你应该更具体。如果我理解正确您的问题是您单击图标时菜单没有显示？

在你的div中你有一个onclick属性，应该与名为closeNav（）和openNav（）的javascript函数配对。这些功能用于管理菜单中的滑入/滑出。没有它，就没有机会出现菜单。

当我们查看开发人员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)

当我们尝试关闭菜单时。

如果我们查看索引为92的javascript文件，它会说：

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函数应该以具有id的元素为目标。您的菜单似乎获得了navToShow ID。你应该在这个和javascript函数之间建立链接。

但这只是一个建议，而不是一个明确的答案......