W3CSS Sidebar

In the previous article, we studied navigation. We already know that navigation can be in the form of top menu bar or on in the form side navigation. In this article we shall study how to create W3CSS sidebar navigation. Take a look at it.

Basic W3CSS Sidebar

To create a basic sidebar creating a div with class w3-bar-block and w3-sidebar. Give this div a width of 25%.
This way this div will occupy 25% of the width. Inside the div add some anchors tags and give them class of w3-bar-item and w3-button. Similarly, to create page content. Create another div and style it so that it has left margin of 25%. This way this div will not override the sidebar. Add some random heading to the div. 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>

<!-- Sidebar -->
<div class="w3-sidebar w3-blue w3-bar-block" style="width:25%">
  <h3 class="w3-bar-item">Menu</h3>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>


<div style="margin-left:25%">

<div class="w3-container w3-orange">
  <h1>Welcome to Knowledge Hills</h1>
</div>

</div>

</body>
    
</html>

Download the code Try the code

Collapsible Sidebar Over Main Content

It is very easy to create a collapsible side bar that overlays the main content. To do so create a sidebar as we did in the last example. Give it an id of “Sidebar1”. Create a menu button inside the main content div. By default the sidebar is not displayed. On the button click, execute javascript function that displays the sidebar. 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-sidebar w3-bar-block w3-blue" style="display:none" id="Sidebar1">
  <button onclick="close_sidebar()" class="w3-bar-item w3-large">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

    
<div class="w3-orange">
  <button class="w3-button w3-orange" onclick="open_sidebar()">☰</button>
  <div class="w3-container">
    <h1>Welcome  to Knowledgehills.com</h1>
  </div>
</div>
    
<script>
function open_sidebar() {
    document.getElementById("Sidebar1").style.display = "block";
}
function close_sidebar() {
    document.getElementById("Sidebar1").style.display = "none";
}
</script>

</body>
    
</html>

Download the code Try the code

Collapsible Sidebar covering whole width

It is very easy to create a collapsible side bar that covers full width of the screen. To do so create a sidebar as we did in the last example. Give it an id of “Sidebar1”. Create a menu button inside the main content div. By default the sidebar is not displayed. On the button click, execute javascript function that displays the sidebar and sets it’s width to 100%. 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-sidebar w3-bar-block w3-blue" style="display:none" id="Sidebar1">
  <button onclick="close_sidebar()" class="w3-bar-item w3-large">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

    
<div class="w3-orange">
  <button class="w3-button w3-orange" onclick="open_sidebar()">☰</button>
  <div class="w3-container">
    <h1>Welcome  to Knowledgehills.com</h1>
  </div>
</div>
    
<script>
function open_sidebar() {

    document.getElementById("Sidebar1").style.display = "block";
        ocument.getElementById("Sidebar1").style.width = "100%";
}
function close_sidebar() {
    document.getElementById("Sidebar1").style.display = "none";
}
</script>

</body>
    
</html>

Download the code Try the code

Collapsible Responsive Sidebar

In the same way, you can also create collapsible sidebar that pushes the content towards the right. The following example demonstrates this concept.

<!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="display:none" id="Sidebar1">
  <button class="w3-bar-item w3-button w3-large"
  onclick="close_sidebar()">Menu &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

<div zclass="w3-main" id="main-content">

<div class="w3-orange">
  <button class="w3-button w3-orange w3-xlarge" onclick="open_sidebar()">&#9776;</button>
  <div class="w3-container">
    <h1>Welcome to knowledge hills</h1>
  </div>
</div>

    
    
<script>
function open_sidebar() {
  document.getElementById("main-content").style.marginLeft = "25%";
  document.getElementById("Sidebar1").style.width = "25%";
  document.getElementById("Sidebar1").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function close_sidebar() {
  document.getElementById("main-content").style.marginLeft = "0%";
  document.getElementById("Sidebar1").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
</script>

</body>
    
</html>

Download the code Try the code

<<< W3CSS NavigationW3CSS Tabs >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .