Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Tabs

Problem You want to create a tabbed user interface that displays the contents of tabs without loading
new pages. You want it to adapt reliably and fluidly to different environments.

Solution You can use the Tab Menu design pattern to turn a list into tabs. Inside each list item, you
can insert a tab-label heading and a tab-content section. You can use a variation of the
Screenreader-only design pattern to remove the section from the normal flow and hide it
offscreen to the left.
The key to this design pattern is relatively positioning the tabs list in place and absolutely
positioning each tab-content element in relation to it. This makes the tabs list the closest
positioned ancestor of each tab-content element. Because of this, you can use width:100%
to stretch the tab content to the width of the tabs list. Otherwise, the tab-content element
would expand to the width of its parent list item, which has been floated left.
You should leave the tab-content element’s top property set to its default value of auto so
the tab-content element is automatically positioned at the same location it would have
been if it weren’t absolutely positioned. This keeps tabs and their content positioned
properly—even if tabs become wrapped.
If you want the height to remain the same for all tabs, you can assign a height to the tab-
content element, or you can leave it at its default value of auto and let a browser
shrinkwrap the height of each tab to its content. If you size it, you can use overflow:auto to
display scrollbars when content overflows.
You can assign the selected class to the list item you want to be displayed when the page
loads.
You can insert a link around each tab-label element to load a fallback page when the user
clicks a tab and JavaScript isn’t available to switch tabs.

Pattern^

HTML

• 
  

  
  TAB_LABEL

  
  
  
  TAB CONTENT
  
  

CSS ul.tabs { position:relative; }
ul.tabs .tab-content { position:absolute;
width:100%; height:VALUE;
border:WIDTH STYLE COLOR; border-top:none;
left:-99999px; overflow:auto; }
ul.tabs li.selected .tab-content { left:0; }
ul.tabs li .oi2 { margin:VALUE; padding:VALUE; }
ul.tabs .tab-label a { display:block; text-decoration:none; }
ul.tabs .hover,
ul.tabs .tab-label:hover { text-decoration:underline; }

(^)
(^)