Mission

Before this, I’ve release a tutorial about the CSS sliding door using only 1 image. I will extend from there and what we need to do is to modify some codes. Before that, you can
.

Step 1 – HTML Structure

Let’s start here. This is a basic structure that we need. We need to put everything inside a div that we are going to control using the javascript. Here we use #tab. The beauty of Savvy UI is that the title of the div will be the anchor text for the tab buttons. The x-simpletab-panel is a pre-built class for the tab button within the system to make sure that the content within the div will be included in the tabbing system.

<div id="tab">
	<div id="tab-home" title="Home" class="x-simpletab-panel">
        <!--content goes here-->home content
        </div><!--tab-home end-->

	<div id="tab-products" title="Products" class="x-simpletab-panel">
        <!--content goes here-->products content
        </div><!--tab-product end-->

	<div id="tab-blog" title="Blog" class="x-simpletab-panel">
        <!--content goes here-->blog content
        </div><!--tab-blog end-->

	<div id="tab-contact" title="Contact" class="x-simpletab-panel">
        <!--content goes here-->contact content
        </div><!--tab-contact end-->
</div>

Step 2 – CSS

For the css part, we will need to create something to suit the system. There will be several auto-generated class for the ul, li and div that we use.

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

.simpletab-toolbar-container { /*container for the tab buttons*/
	float: left;
	width: 100%;
}

ul.simpletab-toolbar { /*auto generated ul with specified class */
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #fff;
	float: left;
	clear: left;
}

ul.simpletab-toolbar li {
	float: left;
}

ul.simpletab-toolbar li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.simpletab-toolbar li a em { /*auto generated em, the useage is same with what we used for the sliding dor as span */
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

ul.simpletab-toolbar li a:hover {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}

ul.simpletab-toolbar li a:hover em {
	background: url("images/blue.png") no-repeat top left;
}

ul.simpletab-toolbar li a.current {
	background: url("images/blue.png") no-repeat top right;
 	color: #0d5f83;
}

ul.simpletab-toolbar li a.current em {
	background: url("images/blue.png") no-repeat top left;
}

.simpletab-container { /*auto generated class for the content container */
	margin-top: 10px;
	float: left;
}

.simpletab-container .simpletab-active { /*auto generated class for the active content container */
	display: block;
}

.simpletab-container .simpletab-hidden { /*auto generated class for the in-active content container */
	display: none;
}

Step 3 – Download the Library and Implement

We need to build the Library that we need and implement into the codes. What we need is only the Simple Tab under Utilities. Then, implement into our system.

<script type="text/javascript" src="savvy-build.js"></script>
	<script type="text/javascript">
		SUI(document).ready(function(){
    		new SUI.Util.SimpleTab("#tab");
		});
	</script>                                

/*before the head close tag*/

The result so far.

Step 4 – Structure The Contents

Now, let’s try to add in some content and style it in what you like. Below is my example for it.

<h1><a href="#">Simple Tab Using Savvy.UI</a></h1>
<div id="tab">
<div id="tab-home" title="Home" class="x-simpletab-panel">
<div class="content">
<h3>Home</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-home end-->

<div id="tab-products" title="Products" class="x-simpletab-panel">
<div class="content">
<h3>Products</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-priduct end-->

<div id="tab-blog" title="Blog" class="x-simpletab-panel">
<div class="content">
<h3>Post Title 1</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-blog end-->

<div id="tab-contact" title="Contact" class="x-simpletab-panel">
<div class="content">
<h3>Contact</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-contact end-->

</div>

Step 5- CSS Again

After that, apply some CSS for it.

#tab {
	clear: left;
	width: 100%;
}

.content {
	border: 1px solid #59b9e8;
	background-color: #e0eef4;
	margin-bottom: 15px;
}

.post {
	padding: 0 10px;
}

h3 {
	background: url(images/header.png) repeat-x top left;
	height: 30px;
	font: 900 20px "Times New Roman", Times, serif;
	color: #fff;
	margin: 0;
	padding: 2px 0 0 10px;
}

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

p {
	padding: 0 0 12px 0;
}

h1 a {
	font: 900 200% "trebuchet MS";
	color: #59B9E8;
	letter-spacing: -1px;
	margin: 0;
	text-decoration: none;
}

h1 a:hover {
	color: #09f;
}

Conclusion and Download

It is simple and easy to do. Again, here is the end result. And below is the download for the source files that I used. Cheers!