Spiga

‘ css ’ category archive

Tabs without JavaScript

June 19, 08 by Gabi Solomon

Today i found an interesting article about Tabs without JavaScript. Turns out you can do a tabbing system without needing to use JavaScript, only by CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.

Here is the code:

PLAIN TEXT
CSS:
  1. div.tabcontainer {
  2.  width: 500px;
  3.  background: #eee;
  4.  border: 1px solid #000000;
  5. }
  6. ul.tabnav {
  7.  list-style-type: none;
  8.  margin: 0;
  9.  padding: 0;
  10.  width: 100%;
  11.  overflow: hidden;
  12. }
  13.  
  14. ul.tabnav a {
  15.  display: block;
  16.  width: 100%;
  17. }
  18.  
  19. ul.tabnav a:hover {
  20.  background: #ccc;
  21. }
  22.  
  23. ul.tabnav li {
  24.  float: left;
  25.  width: 125px;
  26.  margin: 0;
  27.  padding: 0;
  28.  text-align: center;
  29. }
  30.  
  31. div.tabcontents {
  32.  height: 290px;
  33.  background: #ccc;
  34.  overflow: hidden;
  35.  border-top: 1px solid #011;
  36.  padding: 3px;
  37.  
  38. }
  39.  
  40. div.tabcontents div.content {
  41.  float: left;
  42.  width: 100%;
  43.  height: 102%;
  44.  overflow-y: auto;
  45. }
  46.  
  47. div.tabcontents div.content h2 {
  48.  margin-top: 3px;
  49. }

PLAIN TEXT
HTML:
  1. <div class="tabcontainer">
  2.  <ul class="tabnav">
  3.   <li><a href="#tab1">Tab 1</a></li>
  4.   <li><a href="#tab2">Tab 2</a></li>
  5.   <li><a href="#tab3">Tab 3</a></li>
  6.   <li><a href="#tab4">Tab 4</a></li>
  7.  </ul>
  8.  <div class="tabcontents">
  9.   <div class="content" id="tab1">
  10.    <h2>Tab 1</h2>
  11.   </div>
  12.   <div class="content" id="tab2">
  13.    <h2>Tab 2</h2>
  14.   </div>
  15.   <div class="content" id="tab3">
  16.    <h2>Tab 3</h2>
  17.   </div>
  18.   <div class="content" id="tab4">
  19.    <h2>Tab 4</h2>
  20.   </div>
  21.  </div>
  22. </div>

Demo page