按图标从顶部滑入下拉移动菜单

Question

我希望我的移动下拉菜单在用户单击“header-downbar-menu”图标时从顶部滑入，并在用户再次单击它时滑出到顶部。现在按钮只能显示菜单，但我不知道如何为这部分正确编写 JS...

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementById("header-dropdown-menu").style.top = "0px";
  }
}

.header-dropdown {
  width: 100%;
  position: relative;
}

.header-dropdown-menu {
  width: 100%;
  height: 80vh;
  background-color: white;
  position: absolute;
  top: -80vh;
}

<div class="header-downbar-menu" onclick="OpenDropdownMenu()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div class="header-dropdown">
  <div id="header-dropdown-menu" class="header-dropdown-menu">

  </div>
</div>

我无法使变量“DropdownMenuDown”工作

Answer 1

我刚刚看了你的问题。我想你不知道文档的选择器。在你的情况下，代码应该是这样的。

var DropdownMenuDown = false;

function OpenDropdownMenu() {
  if (DropdownMenuDown == false) {
    document.getElementByClassName("header-dropdown-menu").style.top = "0px";
  }
}

“header-dropdown-menu”不是id，而是classname！

Answer 2

我建议您为此使用切换。

看这里：

function showMenu() {
  var topmenu = document.querySelector('.topmenu');
    topmenu.classList.toggle('show-me');
}

body {
  margin: 0;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #AEAEAE;
}

.topmenu {
  position: absolute;
  height: 60px;
  top: -60px;
  width: 100%;
  background-color: red;
  z-index: 99;
}

.show-me {
  top: 0 !important;
}


button {
  position: absolute;
  top: 60px;
  left: 0;
}

<div id="bg">
  <div class="topmenu">
  </div>
  <button onclick="showMenu()">Menu pls!</button>
</div>

按图标从顶部滑入下拉移动菜单

Dropdown mobile menu sliding in from top by pressing the Icon

html

javascript

css

dropdown