Javascript 汉堡包图标滑出菜单

我正在尝试从导航中的一个跨距创建一个滑出菜单，但遇到了困难。希望有人能帮助我，因为我已经搜索了谷歌，但没有找到我想要的。基本上，我有以下代码：

<div style="background-color: #002F33; min-height:50px;">
    <span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
    <div>
        <a href="#Link1">Link1</a>
        <a href="#Link2">Link2</a>
        <a href="#Link3">Link3</a>          
    </div>
    <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>

Moneyball工具>

---

我只想在点击span图像以弹出下面的内容时获得菜单。我不知道为什么我在这方面遇到了麻烦，但非常感谢您提供的任何帮助。

我在一些div中添加了id，并使用javascript切换下面创建的css类

.menu_items_toggle {
  opacity: 1 !important;
  top: 100% !important;
}

下面的片段

//引用包含所有链接的容器
var menu\u item\u container=document.getElementById（“菜单项”）
//如果单击图像，此功能将显示/隐藏菜单选项
函数点击器（）{
menu_items_container.classList.toggle（'menu_items_toggle'）；
log（menu\u items\u container.classList.contains（'menu\u items\u toggle'））
}
log（document.getElementById（“span_img_容器”）；
document.getElementById（“menu\img”）.addEventListener（“单击”，点击器）

#菜单{
位置：相对位置；
}
#菜单项{
位置：绝对位置；
最高：0%；
不透明度：0；
过渡：均为0.5s；
}
.菜单项\u切换{
不透明度：1！重要；
排名：100%！重要；
}
img{
宽度：100px；
高度：100px；
}

Moneyball工具>

我在一些div中添加了id，并使用javascript切换下面创建的css类

.menu_items_toggle {
  opacity: 1 !important;
  top: 100% !important;
}

下面的片段

//引用包含所有链接的容器
var menu\u item\u container=document.getElementById（“菜单项”）
//如果单击图像，此功能将显示/隐藏菜单选项
函数点击器（）{
menu_items_container.classList.toggle（'menu_items_toggle'）；
log（menu\u items\u container.classList.contains（'menu\u items\u toggle'））
}
log（document.getElementById（“span_img_容器”）；
document.getElementById（“menu\img”）.addEventListener（“单击”，点击器）

#菜单{
位置：相对位置；
}
#菜单项{
位置：绝对位置；
最高：0%；
不透明度：0；
过渡：均为0.5s；
}
.菜单项\u切换{
不透明度：1！重要；
排名：100%！重要；
}
img{
宽度：100px；
高度：100px；
}

Moneyball工具>

那么你的js代码在哪里？就菜单部分而言，它就在那里。那么你的js代码在哪里？就菜单部分而言，它就在那里。