垂直に積み重ねられたタブを使用して、タブの横にある非表示のコンテンツ パネルの表示を切り替えるコンテンツ ナビゲーション パターンを構築しようとしています。幅が狭い場合、このパターンは崩れます。
ここに私のフィドルがあります: http://jsfiddle.net/jrotton/xCeX8/1/
やや反応が良いですが、12 個のタブがあり、ラベルの長さが「看護」から「建築、設計、建設」までの範囲であるとしましょう。これは、画面が 500px 以下になると壊れます。
私はできた：
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..動作しますが、複数のタブがある場合は理想的ではありません。タブメニューを非表示にして、パネルをクリック可能なh2で折りたたみ可能なものに変更したいと思います。パターンがスクリーン リーダーでアクセスできることも重要ですが、まだそこまではできていません。
どうすればこれを行うことができるかについてのアイデアはありますか? 前もって感謝します..