How To Create a Collapsible Side Panel 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 250px height side panel will appear from the left edge of the webpage, gently covering its size of the main document content rightwards, to about 250px width. The side panel has a close button that when clicked, it will retract into the left edge of the webpage gently, uncovering its size of the main document. This tutorial explains how to create that effect. The side panel has a vertical menu, for which, in this project example, the menu consists of hyperlinks.
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 Sidepanel Button. The side panel should slide in 0.5s to to the right. Click the close button of the side panel, and the side panel should slide back into the left edge of the page, also in 0.5s. 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>Collapsed Side Panel</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 side panel to move rightwards and to cause the side panel to go back left. The side panel is an HTML div element. The HTML body element will have the side panel div and the rest of the webpage content.
The Body Element Content
The content of the HTML body element is:
<div id="mySidepanel" class="sidepanel">
<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>
<button class="openbtn" onclick="openNav()">☰ Open Sidepanel</button>
<h2>Collapsible Sidepanel</h2>
<p>Click on the hamburger menu/bar icon to open the sidepanel.</p>
The sidebar is an HTML div element. It has the ID, "mySidepanel" and the class-name, "sidepanel". 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 Sidepanel" as its content. The code will appear as the menu icon. When either the menu icon or the text, "Open Sidepanel" is clicked, the JavaScript function, openNav() will be called to extend the side panel rightwards, see below.
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 Side Panel div
The CSS rule for the side panel div is:
div.sidepanel {
width: 0;
height: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
Since the side panel will extend from the left edge of the webpage, it has a width of 0px, when it is not extending. The height is 250px. 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 side panel has to appear in front of its size portion of the main document div. The distance between the top end of the webpage and the top end of the side panel div is 0px. The distance between the left end of the webpage and the left end of the side panel div is 0px.
The background color of the side panel div is #111 (black, but not the blackest black). At this point, the width of the side panel div is 0px. So the contents it has (the anchor elements), overflow rightwards. So, at this point, the contents of the side panel div has to be hidden; hence the property, "overflow-x: hidden;" . The side panel 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 side panel has a padding-top of 60px.
CSS Rule for the Side Panel Anchor Elements
The CSS rule for the side panel anchor elements is:
div.sidepanel 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:
.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.
Styling the Close Button
The first element in the side panel 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.sidepanel .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 side panel div. Its top end will be 0px below the lower top padding edge of the side panel div. Its right end will be 25px to the left of the right end of the side panel div. Its font-size is 36px.
Now, this anchor element is a child element of the side panel div. For it to have the absolute position property, its parent element should have a position property. The position property that the parent element (side panel div) has, is the fixed position property.
Any property in the "div.sidepanel a" CSS rule for all the anchor elements, which is found in this "div.sidepanel .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.sidepanel 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:
.openbtn:hover {
background-color:#444;
}
When the mouse pointer goes over the open button, its background color becomes, #444 (dark gray).
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="mySidepanel" class="sidepanel">
<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>
<button class="openbtn" onclick="openNav()">☰ Open Sidepanel</button>
<h2>Collapsible Sidepanel</h2>
<p>Click on the hamburger menu/bar icon to open the sidepanel.</p>
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 side panel.
When the open button is clicked, the JavaScript function, openNav() is called. This function gives a new width of 0px to the side panel. The JavaScript is:
<script type="text/javascript">
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
</script>
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Collapsed Side Panel</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.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: "Lato", sans-serif;
}
div.sidepanel {
width: 0;
height: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
div.sidepanel a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
div.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
div.sidepanel a:hover {
color: #f1f1f1;
}
.openbtn:hover {
background-color:#444;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
</script>
</head>
<body>
<div id="mySidepanel" class="sidepanel">
<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>
<button class="openbtn" onclick="openNav()">☰ Open Sidepanel</button>
<h2>Collapsible Sidepanel</h2>
<p>Click on the hamburger menu/bar icon to open the sidepanel.</p>
</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 Sidepanel Button. The side panel should slide in 0.5s to to the right. Click the close button of the side panel, and the side panel should slide back into the left edge of the page, also in 0.5s.
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 . . .BACK