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

Question

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

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

这是我的代码

codepen.io/WildDagger/pen/QWMXZyz

（我不知道为什么stackoverflow编辑器总是会出现烦人的错误，所以我只能粘贴它）

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)

• 底部：-100%；