How To Create a Responsive Collapsible Sidebar Menu
Collapsed Sidebar and Collapsed Side Panel
How To, for Web Applications
By: Chrysanthus Date Published: 3 Apr 2025
When a button is clicked, a 100% height sidebar will appear from the left edge of the webpage, squeezing gently the main document content rightwards, to about 250px. The sidebar has a close button that when clicked, it will retract into the left edge of the webpage gently; releasing the main document. This tutorial explains how to create that effect.
The sidebar has a vertical menu, for which, in this project example, the menu consists of hyperlinks. The sidebar is responsive, in the sense that, when the height of the device screen is less than or equal to 450px, the menu list should move upwards, with smaller text.
At the end of this tutorial, is the complete webpage code. The reader should copy the whole code into a text editor. Save the file with any name, but with the extension, .html . Click the Open Sidebar Button. The sidebar should slide in 0.5s to the right. Click the close button of the sidebar, and the sidebar should slide back into the left edge of the page, also in 0.5s. Reduce the height of the webpage to less than 450px (estimate). Click the Open Sidebar Button again. Notice that the menu has moved upwards, with smaller text. Close the sidebar. The reader is advised to do that before continuing to read the rest of this tutorial.
The webpage Skeleton Code
The code for the webpage skeleton to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Collapse Sidebar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any professional webpage should have at least the first four tags in the HTML head element above. The HTML style element will have a lot of code (CSS rules). The HTML script element will have a short JavaScript to cause the sidebar to move rightwards and to cause the sidebar to go back left. The sidebar is an HTML div element. The HTML body element will have the sidebar div and the rest of the webpage content.
Strategy
The sidebar content is in a div element. The main document content is also in a div element. As the sidebar is extending rightwards, the left margin of the main div is increasing by the same amount, in the same interval. The reverse is true. The sidebar is in front of the left margin of the main document.
The Body Element Content
The content of the HTML body element is:
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h2>Collapsible Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
The sidebar is an HTML div element. It has the ID, "mySidebar" and the class-name, "sidebar". The first element in the sidebar div, is the close button. It is actually an anchor element, which is not meant to load a webpage. That is why it has the attribute, "href='javascript:void(0)'". Its content is the close button character, "×". When the close button is clicked, the JavaScript function, closeNav() will be called to close the sidebar; see below. This anchor element will be positioned exceptionally from the rest of the other anchor elements.
The hyperlink code is the anchor element. The # as value for each href attribute, means that if the anchor element is clicked, no action should take place. This is because this is a teaching exercise and not an actual commercial project.
In the main document of the webpage (in the body element) is a button element. This button element has the menu icon code, "☰" and the text, "Open Sidebar" as its content. The code will appear as the menu icon. When either the menu icon or the text, "Open Sidebar" is clicked, the JavaScript function, openNav() will be called to extend the sidebar rightwards, see below.
The second div element above is for the main document content. The ID for this div of the main document content is "main" .
The HTML style Element Content
The styling of the side panel div and its content, is done within the tags of the style element.
CSS Rule for the Body Element
The CSS rule for the body element is:
body {
font-family: "Lato", sans-serif;
}
If the browser does not have the font, 'Lato', then any sans-serif font present in the browser, has to be used for all the text in all the elements in the body.
Styling the Sidebar div
The CSS rule for the Sidebar div is:
div.sidebar {
width: 0;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
Since the sidebar will extend from the left edge of the webpage, it has a width of 0px, when it is not extending. The height is 100% and will always remain 100% (from top to bottom of screen). This div is given a fixed position and a z-index of 1, assuming that the body element and the rest of the content of the body element, is at z-index 0. Do not forget that the sidebar has to appear in front of the left margin of the main document div. The distance between the top end of the webpage and the top end of the sidebar div is 0px. The distance between the left end of the webpage and the left end of the sidebar div is 0px.
The background color of the sidebar div is #111 (black, but not the blackest black). At this point, the width of the sidebar div is 0px. So the contents it has (the anchor elements), overflow rightwards. So, at this point, the contents of the sidebar div has to be hidden; hence the property, "overflow-x: hidden;" . The sidebar will take 0.5s to extend completely rightwards and 0.5s to retract ; hence the property, "transition: 0.5s;". When not in a small screen, the sidebar has a padding-top of 60px.
CSS Rule for the Sidebar Anchor Elements
The CSS rule for the sidebar anchor elements is:
div.sidebar a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
The display of each anchor element in the sidebar is block. This means that they will be placed one below the other, vertically. A block level element starts from the left end of its container to the right end of its container.
While the sidebar will take 0.5s to appear and disappear completely, all the anchor elements in the sidebar will take 0.3s to appear and disappear completely. They both start appearing or disappearing at the same time.
At this point of the tutorial, it is assumed that the reader understands the meaning of the rest of the properties in the anchor elements CSS rule. These properties are applicable to all the five anchor elements, though some of the properties will be overridden in the particular CSS rule of the close button anchor element, down in the CSS sheet (element).
Styling the Open Button
The open button is in the main div of the webpage. The main div has the main document of the webpage. When the open button is clicked, the sidebar opens. The CSS rule for the open button is:
#main .openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
The property and value, "cursor: pointer;" means that when the mouse pointer goes over the button, the mouse pointer should become a hand. The top and bottom padding of the button rectangle is 10px, and the left and right padding of the rectangle is 15px. It is assumed that the reader knows the rest of the properties in the CSS rule, at this point of the tutorial.
Note how this CSS rule has access the open button though the ID of the main div, in the selector.
Styling the Close Button
The first element in the sidebar div, in the HTML body element, is the close button. It is actually an anchor element, which is not meant to load a webpage. It has the attributes, "class='closebtn' onclick='closeNav()'" . This means that the class-name is 'closebtn', and when the element is clicked, the onclick event calls the JavaScript function, closeNav() .
The content of the anchor element is the code for the symbol, X, which is "×" (without the quotes). All the styling for characters, are applicable to this symbol. The CSS rule for this anchor element having the symbol, is:
div.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
The position is absolute, which means it will be placed in front (and not in the same surface) of the sidebar div. Its top end will be 0px below the lower top padding edge of the sidebar div. Its right end will be 25px to the left of the right end of the sidebar div. Its font-size is 36px.
Now, this anchor element is a child element of the sidebar div. For it to have the absolute position property, its parent element should have a position property. The position property that the parent element (sidebar div) has, is the fixed position property.
Any property in the "div.sidebar a" CSS rule for all the anchor elements, which is found in this "div.sidebar .closebtn" CSS rule, has been overridden here.
Each Anchor Element on Hover
The CSS rule for all the anchor elements, including the close button anchor element is:
div.sidebar a:hover {
color: #f1f1f1;
}
On-hover, the color of text becomes, #f1f1f1 (whitish)
Open Button On-hover Style
The CSS rule for the open button on-hover is:
#main .openbtn:hover {
background-color: #444;
}
When the mouse pointer goes over the open button, its background color becomes, #444 (dark gray).
Transition for Left Margin of main div
As the sidebar is extending to the right, the left margin is also extending in width, by same amount in same duration, squeezing the main div to the right. Do not forget that the sidebar is in front of the margin. The CSS rule for the left margin transition is:
#main {
transition: margin-left .5s;
padding: 16px;
}
Same duration of 0.5s as the sidebar extends! The main div has been accessed here, through its ID. Do not confuse between the padding and the margin. The padding of 16px here, is the padding inside the rectangle of the main div. It is 16px, whether the main div is squeezed or not.
Media Screen Query
When the webpage is viewed in a small screen whose height is less than or equal to 450px, the content of the sidebar will move up from a padding-top of 60px to 16px. The font-size of the anchor element texts is reduced from 25px to 18px. The CSS rule for all that is:
@media screen and (max-height: 450px) {
div.sidebar {padding-top: 15px;}
div.sidebar a {font-size: 18px;}
}
JavaScript
The close button anchor element has an onclick event and the open button also has an onclick event. The content of the body element is given as follows below, again, for quick reference by the reader:
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h2>Collapsible Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
Notice the onclick events for the two buttons.
When the close button is clicked, the JavaScript function, closeNav() is called. This function gives a new width of 250px to the sidebar and a new left margin of same 250px, to the main div.
When the open button is clicked, the JavaScript function, openNav() is called. This function gives a new width of 0px to the sidebar and a new left margin of same 0px, to the main div. The JavaScript is:
<script type="text/javascript">
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
The Complete Webpage Code
And there you have it: The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Collapse Sidebar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
font-family: "Lato", sans-serif;
}
div.sidebar {
width: 0;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
div.sidebar a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
#main .openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
div.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
div.sidebar a:hover {
color: #f1f1f1;
}
#main .openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .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) {
div.sidebar {padding-top: 15px;}
div.sidebar a {font-size: 18px;}
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h2>Collapsible Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</body>
</html>
The reader should copy the whole code into a text editor. Save the file with any name, but with the extension, .html . Click the Open Sidebar Button. The sidebar should slide in 0.5s to the right. Click the close button of the sidebar, and the sidebar should slide back into the left edge of the page, also in 0.5s. Reduce the height of the webpage to less than 450px (estimate). Click the Open Sidebar Button again. Notice that the menu has moved upwards, with smaller text. Close the sidebar.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .NEXT