How to close sidebar by default using Bootstrap ? - GeeksforGeeks

26 Aug, 2020
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:
<!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>  <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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
nidhi_biet
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form