I am in the process of creating a new content navigation design that incorporates vertically stacked tabs to toggle hidden panels adjacent to the tabs. Unfortunately, this layout seems to encounter issues at narrower screen widths.
Check out my work on Fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
While it is somewhat responsive, I face challenges when dealing with 12 tabs with varying label lengths ranging from "Nursing" to "Architecture, Design, and Construction." This causes problems when the screen size decreases to around 500px or less.
One approach could be:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
This solution does work, but isn't optimal for an extensive number of tabs. Instead, I am considering hiding the tab menu and transforming the panels into collapsibles with clickable h2 headings. Making sure the design is accessible for screen readers is also crucial, although I haven't tackled that aspect yet.
If you have any suggestions on how to tackle this issue, I would greatly appreciate it. Thank you in advance!