javascript - Angular 中的汉堡包图标滑出菜单

Question

我正在尝试从我的导航中的跨度创建滑出式菜单，但遇到了困难。希望有人可以提供帮助，因为我已经搜索过谷歌但没有找到我想要的东西。基本上，我有这段代码:

<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>

我只是想在单击跨度图像以飞出下面的内容时获取菜单。不知道为什么我会遇到这个问题，但感谢您提供的任何帮助。

Answer 1

我将 id 添加到您的一些 div 并使用 javascript 切换下面创建的 css 类

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

下面的片段

//make a refernce to the container that holds all your links
var menu_item_container = document.getElementById("menu_items")

//This function will show/hide menu options if image is clicked on
function clicker() {
  menu_item_container.classList.toggle('menu_items_toggle');
  console.log(menu_item_container.classList.contains('menu_items_toggle'))


}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)

#menu {
  position: relative;
}
#menu_items {
  position: absolute;
  top: 0%;
  opacity: 0;
  transition: all 0.5s;
}
.menu_items_toggle {
  opacity: 1 !important;
  top: 100% !important;
}
img {
  width: 100px;
  height: 100px;
}

<div id="menu" style="background-color: #002F33; min-height:50px;">
  <span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
  <div id="menu_items" class="">
    <a href="#Link1">Link1</a>
    <br>
    <a href="#Link2">Link2</a>
    <br>
    <a href="#Link3">Link3</a> 
    <br>
  </div>
  <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>