Tabbed content
This is an example of how to create a javascript tabbed
content box using menus created via CSS Menu Builder.
You can get the code by copy/pasting the code from
the next couple of tabs here.
Please note that this example uses
jQuery as the javascript framework.
CSS
<style type="text/css">
/* Example styles used for this demo */
#tabContainer{
position:relative;
width:400px;
}
#tabMenu{
position:relative;
height:30px;
}
#tabContent{
position:relative;
height:266px;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#444444;
border:4px solid #9fb2d6;
overflow:auto;
}
#tabContent .content{
display:none;
}
#tabContent .active{
padding:5px 10px;
display:block;
}
/* Tab menu styles generated via the horitontal menu builder @ www.cssmenubuilder.com */
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(82,82,82);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
</style>
HTML
<div id="tabContainer">
<div id="tabContent">
<div id="css" class="content active">
<strong>CSS</strong>
</div>
<div id="html" class="content">
<strong>HTML</strong>
</div>
<div id="js" class="content">
<strong>Javascript</strong>
</div>
<div id="jquery" class="content">
<strong>jQuery</strong>
<p>
<a href="http://jquery.com/" target="_blank">Get jQuery here</a>
</p>
</div>
</div>
<div id="tabMenu">
<ul class="menu">
<li><a href="css" class="active"><span>CSS</span></a></li>
<li><a href="html"><span>HTML</span></a></li>
<li><a href="js"><span>Javascript</span></a></li>
<li><a href="jquery"><span>Get jQuery</span></a></li>
</ul>
</div>
</div>
Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
initTabs();
});
function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}
</script>
jQuery
Please note that this example uses jQuery 1.2.6
Get jQuery at Google
Get jQuery at the official site here
jQuery via Google
You can also link directly to jQuery 1.2.6 via Google.
For more information, please visit Google
