How to close sidebar by default using Bootstrap ?

Bootstrap is the most popular responsive and open source CSS framework used by software developers. The sidebar is a widget that contains navigational links to other parts of the website. The sidebar is generally used to display a list of menu items. This article demonstrates two methods to create a sidebar of a webpage where the sidebar remains closed or hidden by default. The first method displays the sidebar on clicking the Menu button and later the sidebar can be closed by clicking the X icon on the top right corner. The second method demonstrates a toggling sidebar that remains hidden by default. Clicking the Menu button displays the sidebar and clicking the Menu button again hides the sidebar.

Method 1: The webpage contains a division with id=main, This division contains the actual content of the webpage. A button labeled as “Menu” is created which triggers the openNav() function. The function openNav() fetches the sidebar division using document.getElementById() and sets the width of the sidebar and the ‘main’ division. After the sidebar is displayed the user clicks on the close button on the top right corner of the sidebar which triggers the closeNav() function. The function closeNav() fetches the main division using document.getElementById() and sets the width of the sidebar to 0 hiding it from the webpage and the left margin of main division is set to 0 which makes it take the full width of the screen. Since both the functions are javascript functions they are placed within the script tags. The CSS specified within the style tag enables proper positioning and transition of the sidebar and main division.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        /* The sidebar menu */
        .sidebar {
            height: 100%;
            /* 100% Full-height */
            width: 0;
            /* 0 width */
            position: fixed;
            /* Fixed place */
            z-index: 1;
            /* Stay on top */
            top: 0;
            left: 0;
            background-color: black;
            /* Disable horizontal scroll */
            overflow-x: hidden;
            /* Place content 60px from the top */
            padding-top: 60px;
            /* Transition effect to slide 
                in the sidebar */
            transition: 0.5s;
        }
  
        /* The sidebar links */
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
  
        /* Mouse over the navigation 
          links, to change their color */
        .sidebar a:hover {
            color: green;
        }
  
        /* Position and style the close 
          button at top right corner */
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
  
        /* The button used to open the sidebar */
        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
        }
  
        .openbtn:hover {
            background-color: #444;
        }
  
        /* Style page content - pushes the
          page content to the right when the 
          sidebar is opened */
        #main {
  
            /* If you want a transition effect */
            transition: margin-left 0.5s;
            padding: 20px;
        }
  
        /* On smaller screens, where height is 
          less than 450px, change the style of
          the side-nav (less padding and a 
          smaller font size) */
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
  
            .sidebar a {
                font-size: 18px;
            }
        }
    </style>
</head>
  
<body>
    <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" 
            class="closebtn" onclick="closeNav()">
            ×
        </a>
        <a href="#">My Account</a>
        <a href="#">My Articles</a>
        <a href="#">Interests</a>
        <a href="#">Practice</a>
        <a href="#">Testimonials</a>
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
    </div>
    <!-- The main division contains the actual 
        content of the webpage -->
    <div id="main">
        <h1 style="color: green;">
            Welcome to GeeksForGeeks
        </h1>
        <button class="openbtn" 
            onclick="openNav()">Menu
        </button>
          
        <h2>
            This is a demonstration of collapsed
            sidebar by default. The sidebar opens
            on clicking the Menu button.
        </h2>
    </div>
  
    <script>
        function openNav() {
            document.getElementById(
                "mySidebar").style.width = "200px";
            document.getElementById(
                "main").style.marginLeft = "200px";
        }
  
        /* Set the width of the sidebar to 0 
        and the left margin of the page content to 0 */
        function closeNav() {
            document.getElementById(
                "mySidebar").style.width = "0";
            document.getElementById(
                "main").style.marginLeft = "0";
        }
    </script>
</body>
  
</html>

chevron_right


Output

Method 2: This method displays the sidebar using the toggling functionality of an input field having type ‘checkbox’ and role ‘button’. When the user clicks the button, the checkbox is checked and it sets the left margin of the ‘content’ division to 0 which means it occupies the entire screen. When the user clicks the button again, the checkbox is unchecked and the left margin of ‘content’ division is set to 200px and the sidebar is displayed. This transition happens in the CSS, unlike the previous example where the entire operation was carried out by the javascript functions.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <style>
        .sidebar {
            background-color: black;
  
            /* Occupies 100% height of the page */
            height: 100%;
  
            /* Specifies the width of sidebar */
            width: 500px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            padding-right: 60px;
  
            /* Transition effect of sidebar */
            transition: 0.5s;
        }
  
        .sidebar h2,
        li {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #818181;
            display: block;
  
            /* Transition effect of h2 and li */
            transition: 0.3s;
        }
  
        .sidebar li:hover {
  
            /* Sidebar items change color 
            when hovered over */
            color: green;
        }
  
        .content {
            background-color: white;
            position: absolute;
            top: 0;
  
            /* The left margin when 
            sidebar is visible */
            left: 200px;
            right: 0;
            bottom: 0;
  
            -moz-transition: left 0.5s ease;
            transition: left 0.5s ease;
        }
  
        input[type="checkbox"] {
            display: none;
        }
  
        /* Toggling of sidebar */
        input:checked~.content {
            left: 0;
        }
  
        input:checked~label {
            left: 0;
        }
  
        /* Styling of the button */
        label {
            z-index: 2;
            position: absolute;
            top: 0;
            left: 200px;
            background-color: black;
            color: white;
            -moz-transition: left 0.5s ease;
            transition: left 0.5s ease;
        }
    </style>
</head>
  
<body>
    <!-- This division contains 
        the sidebar and its content -->
    <div class="main-wrap">
        <input id="slide-sidebar" 
            type="checkbox" role="button" />
  
        <label for="slide-sidebar">
            <span>Toggle</span>
        </label>
        <div class="sidebar">
            <h2>Menu Bar</h2>
            <ul>
                <li>Basic</li>
                <li>Profile</li>
                <li>Articles</li>
                <li>Testimonial</li>
                <li>Practice</li>
            </ul>
        </div>
  
        <!-- This division contains the
          actual content of the webpage -->
        <div class="content">
            <h1 style="color: green;">
                Welcome to GeeksForGeeks
            </h1>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output

By default, the sidebar in both the examples remains closed or hidden. It is only when the user clicks the button the sidebar displays. Collapsing sidebars are space-efficient and make the webpage look clean and spacious. Sidebars can be fixed and scrolling as per the user requirement. The article, however, demonstrates fixed sidebars.

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet