如何在 HTML 中从底部制作全屏抽屉菜单？

Question

我想做一个全屏的抽屉菜单，可以从底部打开，但是我不能在页面底部做一个打开按钮。

这是确保按钮在任何分辨率下都位于页面底部的简单方法吗？

这是我的代码

codepen.io/WildDagger/pen/QWMXZyz

（不知道为什么Whosebug editor老是出烦人的错误就直接贴了）

Answer 1

您必须将导航置于屏幕下方。为此，您需要 bottom: -100%;。这样元素将完全不可见，这将适用于所有分辨率。检查代码：

.menu-container {
    bottom: -100%;  /* Currently -375px */
    ...
}

menuBtnClose.addEventListener('click', function(e) {
    e.preventDefault()
    menuContainer.style.bottom = "-100%" /* Currently -375px */
})

Answer 2

您需要在 CSS 和 JS

中进行更改

使用-100%代替-375px

JS 变化

menuContainer.style.bottom = "-100%"

CSS 在此更改 class (.menu-container)

bottom: -100%;