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

Question

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

这是我的 fiddle :http://jsfiddle.net/jrotton/xCeX8/1/

它有点 react ……但假设我有 12 个标签，标签的长度范围从“护理”到“建筑、设计和施工”。当屏幕低于 500px 左右时，这会中断。

我可以:

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

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

关于如何执行此操作的任何想法？提前致谢..

Answer 1

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

这里有一些想法......

另外我想说的是，根据您目前的情况，在移动版本上将该菜单向右浮动是行不通的。在移动设备尺寸下，这些导航项应为 100% 宽度，并且导航应位于内容上方，或者应为另一个“滑动面板”。

Jquery Mobile 也内置了一些非常有用、非常常见的设计模式:

http://jquerymobile.com/