Question

我正在做一个网站，我想要一个切换/图标打开菜单，从桌面视图左侧滑入，然后在移动设备中我只想让它从顶部下拉并做出响应。有谁知道怎么做？

由于

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

您可能希望添加前缀并在多个设备上进行测试。

那就是说，这个问题比我在这里展示的要复杂得多。例如。固定的位置是旧浏览器可能存在问题的属性。

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

1 个答案: