如何将垂直选项卡式内容面板更改为具有媒体查询和jquery的响应式可折叠？

Question

我正在尝试构建一个内容导航模式，该模式使用垂直堆叠的标签来切换选项卡旁边隐藏内容面板的显示。在较小的宽度下，这种图案会破裂。

继承我的小提琴：http://jsfiddle.net/jrotton/xCeX8/1/

它有点响应......但是我可以说我有12个标签，标签的长度从“护理”到“建筑，设计和施工”。当屏幕低于500px左右时，这会中断。

我可以：

.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }

..它可以工作但是当你有多个标签时它并不理想。 我宁愿隐藏标签菜单并将面板更改为可折叠的h2's。同样重要的是该模式是屏幕阅读器可访问的，但我还没有做到这一点。

关于我如何做到这一点的任何想法？提前谢谢..

Answer 1

http://www.zurb.com/playground/off-canvas-layouts

以下是一些想法......

此外，我会说你现在拥有的东西，在移动版本右侧浮动该菜单是行不通的。在移动设备尺寸上，这些导航项应该是100％宽度，导航应该在内容之上，或者应该是另一个“幻灯片”。

Jquery mobile还有一些非常有用，非常常见的设计模式：

http://jquerymobile.com/