CSS Tabbed Interface

Tabbed interface with CSS

• One

  The Technique

  The basic idea behind CSS tabs is that an element’s children are displayed when you hover over it. This demo takes the technique a step further in order to make the content keyboard-accessible.

  Initially, everything except the default tab is hidden with margin-left: -9999px;. The hover effect uses descendant selectors to set this back to margin-left: 0;.

  Making this work in IE6 requires either some JavaScript or the whatever:hover .htc behaviour.

  Keyboard accessibility is more complex. Each tab must contain an <a> element in order to receive :focus. However, this <a> element cannot be wrapped around the entire tab (as it cannot contain block-level elements or other hyperlinks). So adjacent sibling selectors are used to select the tab contents. This works in IE7 and above, but IE6 and below again need helping out with a bit of JavaScript.

• Two

  The HTML

  <ul class="tabs-container">
    <li id="one">
      <div><a href="#">One</a>
        <div>
          Tab One content
        </div>
      </div>
    </li>
    <li id="two">
      <div><a href="#">Two</a>
        <div>
          Tab Two content
        </div>
      </div>
    </li>
  </ul>

• Three

  The CSS

  You’ll have to look at the source—it’s too long to show here! But the basic idea is to use child selectors to show the children of each tab on :hover, and sibling selectors to achieve the same effect on :focus.

• Four

  Some Caveats

  Geting the :hover effects to work in IE6 requires either some JavaScript or the .htc fix for whatever:hover.

  There must be an <a> element in each tab for keyboard accessibility through :focus. Tabs other than the default tab should not contain any subsequent <a> elements—focusing these will return the display to the default tab. This could be fixed with a JavaScript ‘parent selector’.

  A JavaScript fix is also necessary to make the tabs keyboard-accessible in IE6, as it doesn’t support adjacent‐sibling selectors.

  A height must be declared on all elements, or else the height will change as different tabs are hovered.