Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a collapsible sidebar menu with CSS and JavaScript?
A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data.
To create a collapsible sidebar menu, we need HTML, CSS, and javascript. A collapsible sidebar will collapse along with the main page. In simple words, it means the menu bar is displayed on the page with its respective width; and main content of the page takes a minimum margin to display on the page.
Following are the steps to be followed to create a collapsible sidebar menu. In this example, we are creating a webpage displaying the “collapsible sidebar menu”. A menu with 4 links will appear after a click.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required the text, a collapsible sidebar menu, and empty navigation Links for the menu.
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="hide()">×</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Career</a>
<a href="#">ContactUs</a>
</div>
<div id="content">
<button class="openbtn" id="openbtn" onclick="show()">☰</button>
<h2>Collapsed Sideber</h2>
<p>
Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
</p>
</div>
Example.css
Add CSS style to give a hover effect on the collapsible sidebar menu for a better look. In this example, we are styling the collapsible sidebar if hovering over the link background color will be changed.
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
Example.js
Using Javascript we can perform validation and the handle event on the page. In this example, creating the show and hide buttons. The navigation will be opened by clicking on the menu bar button, and closed by clicking the cross button.
Let’s see tha javascript code for a better understanding −
<script>
function show() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function hide() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
</script>
Complete Example
Let’s see a complete example to collapsible a sidebar with the help of CSS, HTML, and Javascript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (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="hide()">×</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Career</a>
<a href="#">ContactUs</a>
</div>
<div id="content">
<button class="openbtn" id="openbtn" onclick="show()">☰</button>
<h2>Collapsed Sideber</h2>
<p>
Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
</p>
</div>
<script>
function show() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function hide() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
</script>
</body>
</html>
5K+ Views
