Skip to content
Related Articles

Related Articles

How to close sidebar by default using Bootstrap ?

View Discussion
Improve Article
Save Article
  • Last Updated : 05 May, 2022
View Discussion
Improve Article
Save Article

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: 

HTML




<!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>

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: 

HTML




<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>

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!