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.