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

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

 

Back to the article at css menu builder