调整浏览器窗口大小时创建可下拉菜单

Question

所以我正在努力实现一个响应式网站。

这是我目前的导航（窗口已最大化）：

我想要实现的是，当调整窗口大小时，会出现一个名为菜单的新选项卡。这将是一个按钮，单击后将显示我拥有的所有现有链接。

我在两个单独的div's 中有两个列表，理想情况下，当调整窗口大小时，我希望这两个lists 中的内容都可以在这个新菜单中查看。

这是将 Chrome 调整为最小宽度时的样子：

如您所见，图像中的那些链接（伸展、姿势等）不应该是可见的。一旦单击菜单，它们应该会动态显示，这是另一个问题，单击菜单没有任何作用。

我所拥有的一切都可以在这个小提琴中找到：https://jsfiddle.net/hudnybux/

Answer 1

这是一个很常见的用例，我相信你可以想象。谷歌搜索花了我 5 秒钟，this 是第一个弹出的。这似乎简单而直接。

作为堆栈溢出的一般规则，请在提问之前尝试环顾四周...人们通常会更好地回答您的答案。 :)