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="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 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>

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 ac = ael.getProperty('href'); $(ac).addClass('active'); } </script>

Mootools

Please note that this example uses MooTools 1.11 Get MooTools 1.11 here Get MooTools 1.12 here

Mootools via Google

You can also link directly to MooTools 1.11 via Google.
For more information, please visit Google

 

Back to the article at css menu builder