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

【问题标题】：How to make full screen drawer menu from bottom in HTML?如何在 HTML 中从底部制作全屏抽屉菜单？
【发布时间】：2021-11-25 06:27:50
【问题描述】：

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

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

这是我的代码

codepen.io/WildDagger/pen/QWMXZyz

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你需要在 CSS 和 JS 中改变

使用-100% 代替-375px

JS 变化

menuContainer.style.bottom = "-100%"

此类中的 CSS 更改 (.menu-container)

bottom: -100%;

【讨论】：