Javascript JS，我想做一个按钮，打开整个屏幕的导航

*编辑：每个人都不喜欢这个帖子：(

所以我想要一个按钮（我将制作一个汉堡包文本），当我点击按钮时，我希望整个页面（导航元素）变成（100%宽度和100高度，我将在其中加入flex）导航菜单，当我再次点击按钮时，导航元素消失

我想知道的是：

我如何做CSS，使导航元素在所有其他元素之上打开？ 位置：绝对

（在我知道如何将导航元素置于其他元素之上之后- 可能在导航页面上显示：无，并在我更改显示时以某种方式将其覆盖在所有内容上：用JS可见？）

我在哪里可以找到JS（因为我还不知道）来编辑点击导航元素的CSS

W3中的类似内容，但我可能需要将diplay从“无”更改为“可见”，然后再次更改：

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

点击我！

为了将导航设置为全屏，您应该使用css的

位置：fixed

属性。为了正确隐藏和显示导航栏，您应该切换元素的类，而不是直接应用显示样式。查看下面的示例以更好地理解它-

let btn=document.getElementById（'btn'）；
让nav=document.getElementById（'nav'）；
btn.addEventListener（'click'，function（）{
//事件侦听器切换活动类
if（nav.classList.contains（'active'））{
nav.classList.remove（'active'）；//如果已经添加了活动类，则删除该类
}否则{
nav.classList.add（'active'）；//如果未添加活动类，则添加活动类
}  
})；

html，正文{
身高：100%；
宽度：100%；
}
导航{
显示：无；/*默认处于隐藏状态*/
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：红色；
颜色：白色；
}
主动导航{
显示：内联块；/*如果nav元素包含活动类，则可见，通过JavaScript代码应用*/
}
#btn{
位置：固定；
顶部：40px；
左：10px；
z指数：100；
}

全屏内容
切换全屏元素
一些静态内容尝试在导航元素中添加css position:absolute；和z-index=99，并用onclick切换其显示