Javascript 可变导航滑块

我想创建一个菜单导航，在大屏幕上将主体内容推到一边，但在小屏幕上覆盖主体内容。可能吗？下面是我的HTML的摘要。有一个按钮可以切换javascript

const导航滑块=（）=>{
let menu=document.getElementById（“导航菜单”）；
menu.classList.toggle（“隐藏”）；
};
。整个容器{
显示器：flex；
宽度：100%；
身高：100%；
}
.侧边栏{
弹性：1；
身高：100%；
}
.主体{
弹性：5；
身高：100%；
}
.隐藏{
弹性：0；
过渡期：0.4s；
}

一些边栏内容
主体
在
媒体中添加
位置
作为
绝对
，
最小宽度
，根据您对屏幕大小的要求即可


const导航滑块=（）=>{
let menu=document.getElementById（“导航菜单”）；
menu.classList.toggle（“隐藏”）；
};
。整个容器{
显示器：flex；
宽度：100%；
身高：100%；
}
.侧边栏{
弹性：1；
身高：100%；
背景颜色：蓝色；
}
.主体{
弹性：5；
身高：100%；
背景色：红色；
}
.隐藏{
弹性：0；
过渡期：0.4s；
}
@仅介质屏幕和（最大宽度：600px）{
.侧边栏{
位置：绝对位置；
高度：自动；
}
}

一些边栏内容
主体
尝试为边栏类使用
溢出
属性。这将处理边栏内的内容。我关心的是我是否有一个边栏，可以根据屏幕大小在覆盖和推送内容之间切换。谢谢你的回复。谢谢你的回复。我会试试的。它没有像我计划的那样工作，所以走了另一条路线