Related Articles

Related Articles

How to create a Collapsed Sidebar?
  • Last Updated : 09 Jul, 2019

Bootstrap Sidebar is a component that is used for vertical navigation. It can be customized in various styles according to your requirement by using CSS and can be made responsive by using JavaScript.

Creating a Simple SideBar:

The .sidebar class is used to create simple Bootstrap sidebar. To make a collapsing sidebar, you need to have a bit of JavaScript Knowledge as well, as it would be used to open and close the sidebar, would make your sidebar responsive.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <style>
        /*Position and style for the sidebar*/
          
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            /*Stays in place */
            background-color: green;
            /*green*/
            overflow-x: hidden;
            /*for Disabling horizontal scroll */
        }
        /* Position and style for the sidebar links */
          
        .sidebar a {
            padding: 10px 10px 10px;
            font-size: 25px;
            color: #111;
            display: block;
            transition: 0.3s;
        }
        /* the links change color when mouse hovers upon them*/
          
        .sidebar a:hover {
            color: #FFFFFF;
        }
        /* Position and style the for cross button */
          
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
        }
        /* Style for the sidebar button */
          
        .openbtn {
            font-size: 32px;
            background-color: #008000;
            color: #111;
            padding: 10px 10px 10px;
            border: none;
        }
        /* the sidebar button changes 
      color when mouse hovers upon it */
.openbtn:hover {
  color: #FFFFFF;
}
  
      /* pushes the page content to the right
      when you open the side navigation */
          
        #main {
            transition: margin-left .5s;
            /* If you want a transition effect */
            padding: 10px;
        }
    </style>
</head>
  
<body>
    <div id="sidebar" class="sidebar">
        <a href="javascript:void(0)" 
           class="closebtn" 
           onclick="closeNav()">
          ×
      </a>
        <!--the cross button-->
        <a href="#">India</a>
        <a href="#">Nepal</a>
        <a href="#">Srilanka</a>
        <a href="#">Myanmar</a>
    </div>
  
    <div id="main">
        <button class="openbtn" 
                onclick="openNav()">
          SIDEBAR
      </button>
        <!-- for the sidebar button-->
    </div>
</body>
<script>
    /* Sets the width of the sidebar 
    to 250 and the left margin of the 
    page content to 250 */
    function openNav() {
        document.getElementById(
          "sidebar").style.width = "250px";
        document.getElementById(
          "main").style.marginLeft = "250px";
    }
  
    /* Set the width of the sidebar 
    to 0 and the left margin of the 
    page content to 0 */
    function closeNav() {
        document.getElementById(
          "sidebar").style.width = "0";
        document.getElementById(
          "main").style.marginLeft = "0";
    }
</script>
  
</html>

chevron_right


Output:

By running these three codes you can make a simple collapsing sidebar. You can further add more CSS features to make it even better according to your requirement.




My Personal Notes arrow_drop_up
Recommended Articles
Page :