W3CSS Tabs

Tabs are basically menus, that when clicked open detail area related to that tab. For instance, tabbed menus are commonly used in websites where clicking upon tab item hides previously displayed information and loads new information. In this article we shall study W3CSS tabs.

Basic W3CSS Tabs

To create basic tabs. Create a horizontal navigation bar. Inside the bar, add each item in the form of button. On clicking each item from the list of items, open the function “openMenu”. Pass the name of the item as parameter to the openMenu function. Now below this navigation bar add individual detailed div for each tab in the navigation bar. The id name of the detailed div should be similar to that of the item name in navigation bar. When the item in the navigation bar is clicked, all the display property of all the divs with class menu is set to none. Then the display property of the element passed in the openMenu function is set to block which displays the detail.
The code sample is as follows:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button" onclick="openMenu('Home')">Home</button>
  <button class="w3-bar-item w3-button" onclick="openMenu('About')">About</button>
  <button class="w3-bar-item w3-button" onclick="openMenu('Contact')">Contact</button>
</div>

<div id="Home" class="w3-container menu">
  <h2>Home</h2>
  <p>Welcome to Knowledge Hills</p>
</div>

<div id="About" class="w3-container menu" style="display:none">
  <h2>About</h2>
  <p>Knowledge hills provide free of cost tutorials.</p> 
</div>

<div id="Contact" class="w3-container menu" style="display:none">
  <h2>Contact</h2>
  <p>Contact us at xyz.com</p>
</div>

<script>
function openMenu(menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(menuName).style.display = "block";  
}
</script>

</body>
    
</html>

Download the code Try the code

W3CSS Colored Tabs

It is very simple to create colored W3CSS tabs. To do so, you need to add “w3-color” class to the item that is active. When you change the active item, the javascript function replaces the w3-color class with “”. Next, it selects the currently selected element and add w3-color class to it. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button w3-red menulink" onclick="openMenu(event,'Home')">Home</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'About')">About</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'Contact')">Contact</button>
</div>

<div id="Home" class="w3-container menu">
  <h2>Home</h2>
  <p>Welcome to Knowledge Hills</p>
</div>

<div id="About" class="w3-container menu" style="display:none">
  <h2>About</h2>
  <p>Knowledge hills provide free of cost tutorials.</p> 
</div>

<div id="Contact" class="w3-container menu" style="display:none">
  <h2>Contact</h2>
  <p>Contact us at xyz.com</p>
</div>

<script>
function openMenu(event, menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    
    menulinks = document.getElementsByClassName("menulink");
     for (i = 0; i < x.length; i++) {
      menulinks[i].className = menulinks[i].className.replace(" w3-red", "");
  }
    
    document.getElementById(menuName).style.display = "block"; 
    event.currentTarget.className += " w3-red";
}
</script>

</body>
    
</html>

Download the code Try the code

Tabs with side navigation

You can also create tabs inside the side navigation. Remember the last article. Create a side navigation by adding w3-sidebar and w3-bar-block class to the navigation div. Also set its width to 250 pixels. Then set left-margin of the main div to 250 pixels. This way main div will float 250 pixels to left. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-sidebar w3-bar-block w3-blue " style="width:250px">
  <button class="w3-bar-item w3-button w3-red menulink" onclick="openMenu(event,'Home')">Home</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'About')">About</button>
  <button class="w3-bar-item w3-button menulink" onclick="openMenu(event,'Contact')">Contact</button>
</div>

    
<div style="margin-left:250px">
    <div id="Home" class="w3-container menu">
      <h2>Home</h2>
      <p>Welcome to Knowledge Hills</p>
    </div>

    <div id="About" class="w3-container menu" style="display:none">
      <h2>About</h2>
      <p>Knowledge hills provide free of cost tutorials.</p> 
    </div>

    <div id="Contact" class="w3-container menu" style="display:none">
      <h2>Contact</h2>
      <p>Contact us at xyz.com</p>
    </div>
</div>

<script>
function openMenu(event, menuName) {
    var i;
    var x = document.getElementsByClassName("menu");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    
    menulinks = document.getElementsByClassName("menulink");
     for (i = 0; i < x.length; i++) {
      menulinks[i].className = menulinks[i].className.replace(" w3-red", "");
  }
    
    document.getElementById(menuName).style.display = "block"; 
    event.currentTarget.className += " w3-red";
}
</script>

</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .