GS Design » html http://www.gsdesign.ro/blog Just another developer blog Thu, 06 Jan 2011 22:28:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Tabs without JavaScript http://www.gsdesign.ro/blog/tabs-without-javascript/ http://www.gsdesign.ro/blog/tabs-without-javascript/#comments Thu, 19 Jun 2008 09:35:51 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=81 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

]]> http://www.gsdesign.ro/blog/tabs-without-javascript/feed/ 0