javascript - 通过切换打开的左侧菜单的代码

Question

我目前正在做一个网站，我想要一个切换/图标来打开在桌面 View 中从左侧滑入的菜单，然后在移动设备中我只希望它从顶部下拉并响应。有谁知道如何做到这一点？

谢谢

Answer 1

这可以通过多种方式完成，我建议使用 CSS:

CSS(移动优先方法):

// mobile
.menu {
  position: fixed;
  top: 0;
  height: 2em;
}

// desktop
@media (min-width: <desktop size>px){
  .menu {
    width: 2em;
    height: fit-content;

    /* smooth transition */
    will-change: transform;
    transition: transform 450ms linear;

    /* this centers the menu vertically and
    puts the menu out of the viewport. */
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-100%);
  }
  .menu.show {
    /* this will put the menu in the viewport */
    transform: translateY(-50%) translateX(0);
  }
}

JavaScript:

var toggleButton = document.querySelector("#toggle-button");
var menu = document.querySelector("#menu");

toggleButton.addEventListener("click", function(){
  menu.classList.toggle("show");
}, false);

您可能想要添加前缀并跨多个设备进行测试。

也就是说，这个问题比我在这里展示的要复杂一些。例如。 position fixed 是旧浏览器可能有问题的属性。