HTML

The mark-up is simple. There are two main div elements: the tabs and the main container. The tabs are formed by an un-ordered list of links. Most of the 'magic' happens in the CSS with a sprinkling of JavaScript.

I certainly would recommend putting the tab related code into some sort of 'master page template'. In this example, I am have not followed this advice (but you should).


<div id="content">

   <div id="tab-container">

      <ul>

         <li><a href="http://bobcravens.com/demos/vertical_tabs/index.html">Introduction</a></li>

         <li><a href="http://bobcravens.com/demos/vertical_tabs/html.html">Html</a></li>

         <li><a href="http://bobcravens.com/demos/vertical_tabs/style.html">CSS</a></li>

         <li><a href="http://bobcravens.com/demos/vertical_tabs/script.html">JavaScript</a></li>

      </ul>

   </div>

   <div id="main-container">

      <h1>Put your content here...</h1>

   </div>

</div>