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

我在你的某些div中添加了id并使用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>

汉堡图标滑出Angular中的菜单

1 个答案: