CHAPTER 17 ■ LAYOUTSTab Menu cont.^
Location This pattern works anywhere a list can be used.
Styles You can style tab links to interact dynamically with the user. The selectors are ul.tabs
a:link, ul.tabs a:visited, ul.tabs a:active, ul.tabs a:hover, and ul.tabs a:focus.
In the example, I hide a tab link’s underline until the user mouses over it. This keeps the user
interface uncluttered. You can render links as blocks so they will stretch to the width of their
tab. This allows the user to click anywhere inside a tab to activate the link.
You can float the tab menu container so it encompasses its floated tabs. The selector is
ul.tabs. You can make the layout more flexible by setting its width to 100% so it stretches to
the width of its container. When using an unordered list, you need to remove its default
margins and padding so they don’t interfere with the position of the tabs. You can use
margin-bottom to put distance between the tab menu and subsequent content. You can also
set the bottom border. In the example, I use a 1-pixel, solid, gold bottom border.
To make list items look like tabs, you can float them to the left. The selector is ul.tabs li.
You can assign a percentage to their width that is the inverse of the number of tabs, such as
16.66% for six tabs, 14.28% for seven, 12.5% for eight, 11.11% for nine, 10% for ten, and so
forth. For percentages to work, the list item must have no left or right margins, borders, or
padding. You can assign list items to list-style-type:none to hide their bullets.
To style the tab’s box, you can select the element that has the tab-label class. You can put
a border around it, pad its content, and add a background image. In the example, I use a
gradient image that transitions from white to gold going from top to bottom. Moving from a
lighter color at the top to a darker color at the bottom supports the illusion that the tab isn’t
selected. The reverse makes the tab look selected. You should set its margins to zero;
otherwise, they will break the tab effect. You can set the cursor to the hand pointer to signal
that the tab can be clicked. You can set font-weight to normal when not selected and bold
when selected. You can align text in the tab label to the center.
To make a tab look selected, you can assign the selected class to it and style that class.
The selector is ul.tabs li.selected .tab-label. You can use border-bottom:none to remove
its bottom border, and you can increase its bottom padding to compensate. The selected tab
also needs to cover the bottom border of the tab container ul.tabs. To do so, you can
increase its bottom padding to cover the tab container’s bottom border, and you can
position it relatively to move it over the border. You can add extra thickness to the selected
tab’s top border to make it stand out. You can add extra top padding to raise it above
nonselected tabs. You can use a negative value in margin-top to compensate for the extra
padding and border.
You can put a border around the left, right, and bottom of the section containing the tab
menu to connect the tab menu with the section’s content.
Related to Floated Box (Chapter 4); Width, Sized, Stretched (Chapter 5); Margin, Border, Padding,
Background, Overflow (Chapter 6); Positioned, Relative, Float and Clear, Relative Float
(Chapter 7); Offset Float, Aligned Static Inline (Chapter 8); Font (Chapter 10); Blocked
(Chapter 11); Lists (Chapter 13)