Javascript 导航菜单显示在网站顶部，即使它已被翻译

.main-navigation {
  position: absolute;
  height: 100%;
  top: -100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fffefc;
  transform: translateY(0);
  transition: all 500ms;
}

/* modifier class*/
.navigation-open {
  transform: translateY(100%);
}

const closeButton = document.querySelector(".close-nav-btn");
const openButton = document.querySelector(".open-nav-btn");
const nav = document.querySelector(".main-navigation");

closeButton.addEventListener("click", () => {
  nav.classList.remove("navigation-open");
});

openButton.addEventListener("click", () => {
  nav.classList.add("navigation-open");
});

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height:0;
  overflow:hidden;
  background-color: #fffefc;
  transition: all 500ms;
}

.navigation-open {
   overflow:auto;
   height: 100vh;
}

Javascript相关问答推荐

如何从JavaScript中的公共方法调用私有方法？

为什么在react js中没有调用加载器函数？

为什么使用MAX_SAFE_INTEGER生成随机整数时数字分布不准确？

如何修复内容安全策略指令脚本-SRC自身错误？

node TS：JWT令牌签名以验证客户端和后台问题之间的身份验证

字节数组通过echo框架传输到JS blob

GrapeJS -如何保存和加载自定义页面

React Code不在装载上渲染数据，但在渲染上工作

空的结果抓取网站与Fetch和Cheerio

手机上的渲染错误文本必须在文本组件中渲染，但在浏览器上没有问题<><>

虚拟滚动实现使向下滚动可滚动到末尾

如何在coCos2d-x中更正此错误

如何修复我的数据表，以使stateSave正常工作？

使用auth.js保护API路由的Next.JS，FETCH()不起作用

VSCode中出现随机行

Puppeteer上每页的useProxy返回的不是函数/构造函数

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中？

react 路由DOM有条件地呈现元素

我怎样才能点击一个元素，并获得一个与 puppeteer 师导航页面的URL？

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时