How to create a Collapsed Sidebar?
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:
< 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 > |
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.
Contact Us