使用javascript和css切换抽屉

我想要一个类似于MaterialUIAppBar的sidenav，但我不想使用任何库，比如jQuery、MaterialUI

范例 我想要的是： 请检查一下这个。 你可以在那里玩来更新风格

function show（）{document.getElementById（'navbar'）.classList.add（'open'）；
}
函数hide（）{document.getElementById（'navbar'）.classList.remove（'open'）；
}

#导航栏{
位置：绝对位置；
左：-200px；
排名：0；
宽度：200px；
背景色：白色；
身高：100%；
过渡：左0.5s；
}
#导航栏打开{
左：0；
盒影：3px0px 20px灰色；
}
#导航栏，打开，覆盖{
内容：''；
背景色：rgba（0,0,0,0.3）；
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
z指数：-1；
}
#内容{
字体大小：50px；
}
#钮扣{
背景颜色：灰色；
颜色：白色；
显示：内联块；
填充：10px；
边界半径：10px；
光标：指针；
}

导航栏
...
内容
内容
内容
内容
内容

我相信这个技巧主要是在屏幕上放置一个固定的div，并在单击导航按钮时切换其可见性。欢迎使用SO！你可能想复习一下。由于缺乏重点，该问题可能超出了可接受的问题指南。你可以随时编辑你的帖子，看看是否可以重新打开。祝你好运，快乐！覆盖存在z索引问题（使其不可链接）。但是，嘿，我觉得你为了这么一个糟糕的问题走了这么远真是太酷了！