时间戳

首页 > 解决方案 > 如何将侧边菜单内容包含到自定义汉堡图标中？

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

问题描述

我设法在我的页面 (www.elevendozen.com) 上从 Codepen 获得了一个动画汉堡包图标，虽然该图标确实具有动画效果，但我无法弄清楚如何将侧面导航菜单内容包含在其中。例如，当点击图标时，菜单不会滑出，反之亦然。

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

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

</div>

标签： javascriptcsshamburger-menu

解决方案

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

在您的 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。您应该在 this 和 javascript 函数之间建立链接。

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

推荐阅读