A simple tabbed navigation menu created with CSS, HTML, and jQuery

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;
}

    
First tab
    
Second tab



    

        Content of the first tab
    
    

       Content of the second tab
    
[/code]
Now, copy and paste this block of code into the  section of your web page:

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

Now, all you will need to do is style the menu the way you want and add your content to the different tabs.
Let me know if you have any questions or run into any issues with this.
Share the knowledge:
Twitter
Facebook
Email
LinkedIn
Google
Reddit