Here are the codes that I use to create a tabbed navigation menu for a website.
You can see a demo of the tabbed menu here.
First, copy and paste this block of code into your stylesheet:
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; color:#333; }
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" target="_blank">http://ajax.googleapis.<wbr>com/ajax/libs/jquery/1.3/<wbr>jquery.min.js</wbr></wbr></a>"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").<wbr>show(); //Activate first tab $(".tab_content:first").show()<wbr>; //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href")<wbr>; //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script></wbr></wbr></wbr>