Javascript 带有两个滑动侧板的布局

我试图找出如何创建一个简单的移动第一布局与两个滑动面板。基本上，如果观察区域的宽度小于700px，我希望布局如下所示：

这将主要用于移动屏幕，允许用户单击左上角的汉堡包菜单，让左侧菜单滑入左侧，或单击右上角的省略号，让右侧菜单从左侧滑入。看起来很简单，但我希望两个菜单都是固定的，这样当主要内容在菜单中滚动时就不会出现在顶部

此外，当查看区域超过700px时，我希望两个菜单自动显示如下：

我想知道是否有人能帮我尽快解决这个问题。我似乎无法把它钉牢。我很感激

为了实现响应性要求，可以使用将特定CSS样式设置为所需的屏幕大小

要实现固定顶部菜单栏，您可以参考

---

请发布到目前为止您所拥有的。嗨，欢迎来到Stack Overflow！我们很乐意提供帮助，但我们希望您在问题中包含所有相关的代码片段，而不是指向您希望在场外看到的图像。这是因为链接可能会过时，但我们希望堆栈溢出问题永远存在（以防其他人遇到与您相同的问题）。你能编辑你的问题，并添加你所写的所有相关代码吗？同样在你的问题中，加上你已经尝试过的事情以及为什么它们对你不成功。然后我们可以开始帮助您：）