Tabs
Tabs are part of a navigational structure that allows you to chunk information in a logical way, where the selected tab only shows one relevant chunk of information and hides the rest until it accessed via another tab.
Classes
- lotusTabContainer - tabs need to be in a div with this class
- lotusTabs - assigned to a ul tag
- lotusSelected - goes on the li tag of the selected tab
- lotusTabContent (optional) - goes on the div that wraps the content if you want a border around your tab content.
Basic Implementation
Tabs are created using an unordered list, each list item is a tab with a link tag inside of it that makes the tab interactive.
The unordered list sits inside a div assigned the lotusTabContainer class. This gives the div a position of relative, and the tabs are positioned absolutely at the bottom of the container.
Content goes after the tab list, wrapped in a div so that you can aria-enable it as a tab panel.
Variations
We have a set of tabs in our titlebar. In that case the titlebar div functions as the tab container and is given a position of relative. We don't use a div for tab content in that case because our titlebar tabs navigate to another page.
Examples
Sample HTML
CSS (tabs.css)
Theme CSS (tabsTheme.css)
August 2009: added a div following the tab container for tab content. This allows us to aria-enable the tabs.
February 2009: added an extra div inside the li tag and around the link tag to support barn-door styling using 3 graphics.
We've created tabs this way to support the sliding doors technique for tabs with rounded corners, but this implementation of tabs can also be styled just using borders.