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
- ). 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
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; }
place a hyperlink inside each list item (