Create Tabbed-Navigation By Using HTML And CSS

Tabbed-navigation is quite popular for navigation in your website. It doesn't spent much space in your webpage because, you only need to click a tab in order to navigate and see the content. If you don't know about tabbed-navigation, you might want to see the demo by clicking the button below:

You have seen the demo, haven't you? It's time for the tutorial on how to make Tabbed-Navigation. Check it out!
Basically, you need to create 2 files. One file for the HTML, and the another one for the CSS file for the styling. You can put the styling inside HTML file, too. It's up to you.
1. The CSS File
Make a new CSS file and name it "c.css" or any other names that you want. And then, copy and paste the the following code:

c.css: 
.main_tabs {
 position: relative;   
 min-height: 200px;
 clear: both;
 margin: 25px 0;
}

.tabber {
 float: left;
}

.tabber label {
 background-color: #999999;
 padding: 10px;
 border: 1px solid #999999;
 margin-left: -1px;
 position: relative;
 left: 1px;
}

.tabber:hover label {
 background-color: #CCCCCC;
}

.tabber [type=radio] {
 display: none;   
}

.tab_content {
 position: absolute;
 top: 28px;
 left: 0;
 background-color: #FFFFFF;
 right: 0;
 bottom: 0;
 padding: 20px;
 border: 1px solid #999999; 
}

[type=radio]:checked ~ label {
 background-color: #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
 z-index: 2;
}

[type=radio]:checked ~ label:hover {
 font-weight: bold;
 color: #000099;
}

[type=radio]:checked ~ label ~ .tab_content {
 z-index: 1;
}

2. The HTML File
It's time to create the HTML file. Create new HTML file and save it as "index.html" or any other names that you like. Since, we you have create the CSS file, you can simply copy and paste the directory where you save the CSS inside the HTML. It is recommended to save the CSS and HTML file in the same folder.

HTML File: 
<html>
<head>
<title>HTML-CSS-Tabber DEMO</title>
<link href="c.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main_tabs">
    
   <div class="tabber">
       <input type="radio" id="tab1" name="tabgroup_1" checked>
       <label for="tab1">Tab 1</label>
       
       <div class="tab_content">
           Content 1
       </div> 
   </div>
    
   <div class="tabber">
       <input type="radio" id="tab2" name="tabgroup_1">
       <label for="tab2">Tab 2</label>
       
       <div class="tab_content">
           Content 2
       </div> 
   </div>
    
    <div class="tabber">
       <input type="radio" id="tab3" name="tabgroup_1">
       <label for="tab3">Tab 3</label>
     
       <div class="tab_content">
           Content 3
       </div> 
   </div>
    
</div>
</body>
</html>

All set??? Save your files and view what you've created on your web browser. Good Luck.

Labels: , , , , , , , ,