Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Tab Menu

Problem You want to create a menu of links that works like a tabbed user interface. You want it to adapt
reliably and fluidly to different environments.

Solution You can place the list of links in an unordered list (

) and assign the list to the tabs class. You can
place a hyperlink inside each list item (
• ). Because each link functions as a tab heading, you can
  embed the link within a heading element. This gives the link a higher importance to search engines
  and makes it easier for nonsighted users to navigate with screen readers. The heading is also an
  outside-in box. This allows you to style the box of each tab without affecting the outer width of the
  tab.
  When the user clicks a link, you want a browser to replace the current page with the page referenced
  by the link. If the new page also contains the same tabbed menu with the new tab selected, you can
  create the illusion of switching tabs. To change the look of selected tabs, you can assign the selected
  class to the list item containing the link of the currently displayed page. In the example, the first tab is
  selected. Moving the selected class to another list item makes it appear selected.
  
  

  Pattern^

  
  

  HTML

  
  
  • 
    

    
    Tab 1

  
  

  CSS ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active { STYLES }
  ul.tabs a:hover, ul.tabs a:focus { STYLES }
  ul.tabs a { display:block; }

  
  

  ul.tabs { float:left; width:100%; padding:0; margin:0;
  
  margin-bottom:+VALUE; border-bottom:TAB_BOTTOM STYLE COLOR; }

  
  

  ul.tabs li { float:left; width:PERCENT; list-style-type:none; }

  
  

  ul.tabs .tab-label { border:BORDER_WIDTH STYLE COLOR;
  
  padding-bottom:PADDING_BOTTOM;
  
  padding-top:PADDING_TOP;
  
  margin:0; cursor:pointer;
  
  background:COLOR IMAGE REPEAT_OPTIONS POSITION;
  
  font-weight:normal; text-align:center; }

  
  

  ul.tabs li.selected .tab-label
  
  { position:relative; border-bottom:none; font-weight:bold;
  
  top:TAB_BOTTOM; cursor:auto;
  
  padding-bottom:TAB_BOTTOM+PADDING_BOTTOM+BORDER_WIDTH;
  
  border-top:BORDER_WIDTH+EXTRA_BORDER STYLE COLOR;
  
  padding-top:PADDING_TOP+EXTRA_PADDING;
  
  margin-top:-(TAB_BOTTOM+EXTRA_BORDER+EXTRA_PADDING);
  
  background:COLOR IMAGE REPEAT_OPTIONS POSITION; }

  
  

  #SECTION { border:WIDTH STYLE COLOR; border-top:none; }