Xah Lee, 2006-02
In this page, I show how Tab Menu can be done using only CSS. For a explanation of the over-all concept of Tab Menu and a implementation using JavaScript, see Implementing Tabs in Web Design .
Click on the tab on top of this page. You can see that pages get switched and the corresponding tab gets highlighted. Here's how this is done in pure CSS.
We have 3 tabs, each one can be On or Off. If we use capital letters for ON status, we have these possibilities of tab styles:
page A: “A b c” page B: “a B c” page C: “a b C”
We create a style sheet to include styles for all 3 possibilities. For example, we will have a style for page A, where the tab A color will be highlighted with tab B and C dimmed. Similarly, we will have a style for page B and C. This style sheet will be linked from each page. Now, on each page's html, the html container that makes up the tabs will be given a ID. For example, page A's will have “id="pageA"”. So, when page A is loaded, its tabs will use the styles for pageA, which will have tab A in red and other tabs will be gray. View Source to see the code.
See also