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
MooTools 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="mootools" class="content">
<strong>Mootools</strong>
<p>
<a href="http://www.mootools.net" target="_blank">Get MooTools 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="#mootools"><span>Get Mootools</span></a></li>
</ul>
</div>
</div>
Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
initTabs();
});
function initTabs() {
$ES('a','tabMenu').each(function(el) {
el.addEvent('click',function(e) {
var ev = new Event(e).stop();
tabState(el);
});
});
}
function tabState(ael) {
$ES('a','tabMenu').each(function(el) {
if(el.hasClass('active')) {
el.removeClass('active');
}
});
ael.addClass('active');
$$('#tabContent div.content').each(function(el) {
if(el.hasClass('active')) {
el.removeClass('active');
}
});
var acu = ael.getProperty('href');
var ac = acu.replace(/#/, '');
$(ac).addClass('active');
}
</script>
Mootools
Get MooTools here
Mootools via Google
You can also link directly to MooTools via Google.
For more information, please visit Google
