How To Create an Overlay Side Navigation Closable Bar with Animation
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 9 Mar 2025
This tutorial explains How To Create an Overlay Side Navigation Closable Bar, with Animation. For the example in this tutorial, in the body of the webpage, there is the menu icon (of three bars) followed the word, Open. When either the icon or the word, Open is clicked, a black narrow vertical sidebar on the left of the screen, from top to bottom, will open continuously from the left, to cover a narrow vertical stripe on the left side of the screen body. The transition time is 0.5s. This continuous opening within the time 0.5s, is the animation. The sidebar has an X button at its top-right corner. When this X button is clicked, the sidebar closes back into the left edge of the screen body, continuously in 0.5s. Well that is still part of the animation. The opened sidebar has hyperlinks.
At the end of this tutorial is the complete webpage code. The reader should copy the code into a text editor. Save the file with a name having the extension, .html . Open the file in the browser. Click the menu button or the word, Open. The vertical sidebar will appear from the left edge of the page. Close the vertical sidebar by clicking its close button. This should be done to appreciate the appearance and disappearance of the sidebar. The reader is advised to do this before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Overlay Sidebar Navigation</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>
A modern professional webpage should have at least the first four elements in the HTML head element. This project (webpage) needs styles for the style tags, which are in the head element. A bit of JavaScript is also needed for opening and closing of the sidebar. The sidebar is a div element consisting of anchor elements. An anchor element is the same as a hyperlink. Put another way, an anchor element is the code form of the hyperlink.
Strategy
The menu bar is a div element with class-name "sidenav". The strategy is to give this sidebar div a height of 100% and a width of 0px. With the width of 0px, it is positioned at the left edge of the screen. The width of 0% means that it occupies zero space and cannot be seen. It is also given a z-index of 1, assuming that the body element is at z-index 0. With that, it is in front of the HTML body element. When the clicking is done, for it to extend and cover a narrow vertical stripe of the body, it is given a width of 250px. The transition property will make it to cover the screen stripe from the left, in 0.5s.
The Body Content
The code for the body content is:
<div id="mySidenav" class="sidenav">
<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>
<h2>Animated Overlay Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
The sidebar is a div element with anchor elements. The div element has the id "mySidenav" and the class "sidenav", which refers to a CSS rule for the overall presentation of the sidebar. The CSS rule is in the style element.
The first anchor element is not to open any webpage or bring up any section of the long webpage, to the screen view. It is a close button for closing the sidebar, after it has been opened to overlay a left narrow stripe of the screen. The close X symbol is provided by the code, "×" . The class for this particular anchor element is "closebtn", which refers to a CSS rule for the presentation of the close button, in the style element. The "javascript:void(0)" value of its href attribute, means that when the anchor element is clicked, no webpage should open, and no action except the onclick event, should take place.
This anchor element has the onclick event that when clicked, will call the JavaScript function, closeNav() to close the sidebar. This JavaScript function is coded in the script element in the head element (see below). The div sidebar is closed by clicking this close button and not by clicking outside the div sidebar.
The rest of the anchor elements are for the opening of new web-pages or bringing up a section of a long webpage, to the screen view. This is a pedagogic (teaching) project, and so clicking any of these anchor elements (hyperlinks) should not cause any action. That explains the presence of the # as value for the href attributes.
The button to click to open the sidebar, is an HTML span element. It is not an HTML button element. This span element is in the body element, outside of the div sidebar element. The content of this span element is "☰ Open", which consists of the menu icon and the word, "Open". The menu icon is a character of three short horizontal bars, within the background of its containing (a) element. The number code for the menu icon (character) is "☰" . It is subjected to CSS properties of any character, such as font-size, example: "font-size:30px;" .
The "cursor:pointer" of the span style attribute, specifies that when the mouse pointer goes over the span element, it becomes a hand. The hand here does not mean that the mouse pointer is over a hyperlink. It means that clicking any of the contents of the span element ("☰" or "Open") will open something, the sidebar.
The span element has the onclick event which calls the JavaScript function, openNav() to open the sidebar. This JavaScript function is coded in the script element in the head element (see below). When the page is loaded into the browser, the sidebar is not opened. It is only opened when this span element is clicked.
The Style Element
The style element is in the head element. It has CSS rules for the different important elements in the webpage.
The Body Style
The CSS rule to style the body element is:
body {
font-family: "Lato", sans-serif;
}
The Navigation Sidebar Style
The CSS rule for the sidebar div is:
div.sidenav {
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;
}
The initial height before and after transition is 100% of the body height. Before transition the width is 0px. After transition, the width is determined by the JavaScript (see below). The position of this navigation div sidebar is fixed. This means that whenever the page is scrolled down or up the sidebar does not shake to move down or up with the scrolling. This is an overlay sidebar, so it appears in front of the webpage body with a z-index of 1, assuming that the body element is at z-index of 0. As it appears in front of the body element, the distance from the top of the body element to the top of the sidebar is 0px; the distance from the left of the body element to the left of the sidebar is also 0px. Remember that the top or right or bottom and/or left properties have to be typed in the CSS rule, after the position property has been typed. Above, only the "top:0" and "left:0" properties have been typed, after the "position: fixed;" property was typed.
The background color for the div sidebar is #111, which is black but not the blackest black.
Before the sidebar appears in front of the webpage body, its width is 0px. However it has content (the anchor elements). These contents are currently overflowing the 0 width and are in front of the body element covering some of the body contents, like the span element (making it un-clickable). To stop this overflowing, use the property, "overflow-x: hidden;" . With that, the div sidebar content (anchor elements) are no longer overflowing out of the zero width, rightwards into the page. With that the body contents that would be behind the div sidebar, can now be accessed by the mouse pointer.
The transition period to appear and disappear is 0.5s
The hyperlinks appear 60px down, from the top of the div sidebar.
Style for Anchor elements in the Sidebar
Each of the five hyperlink anchor elements (including the close button anchor link) in the div sidebar uses the following CSS rule:
div.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
Around the text as content of each 'a' element, is the padding "8px 8px 8px 32px;" . Notice that the left padding of 32px is relative high, compared with the right padding of 8px. These left and right paddings plus the text content of each of the anchor elements, primarily contributes to the width of each of the anchor elements. However, the true width of the div sidebar (not the anchor elements) comes from JavaScript (see below).
When the mouse pointer goes over a hyperlink (anchor element), no text content must be underlined, because of the presence of the property, "text-decoration: none;" .
At this point, the font-size of all the characters as content, in the anchor elements, including the close button character, is 25px. The font-size of the close button character is ultimately overridden by the "closebtn" CSS rule to 36px(see below).
When the mouse pointer is not over any anchor element (including the close button character), the color of the characters is "#818181;" (light gray).
At this point, each anchor element including the character for the close button, has a display of block. This means that any element typed after it, in the div sidebar, goes below the preceding anchor element. Anchor elements are by default, inline elements. The "display: block;" property here, forces all of them to be block elements, leading to a vertical div content presentation.
Now, the div sidebar takes 0.5s to appear and 0.5s to disappear. It does not really slide from the left edge of the page body into the page; it appears in 0.5s with more right parts being disclosed (shown) vertically. Its initial position with zero width, is at the left edge of the webpage body. With that, each anchor element will appear in 0.3s and disappear in 0.3s when the close button is clicked, because of the property, "transition: 0.3s;" . Each anchor element starts appearing as the div element starts appearing. So, the appearance of each anchor element is complete before the appearance of the div sidebar is complete.
Style for Close Button
The CSS rule for the Close Button anchor element is:
div.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
It comes with an overridden font-size of 36px, compared with the other anchor elements in the div sidebar. The selector code is: "div.sidenav .closebtn" . "sidenav" just next to "div" identifies the particular div element. ".closebtn" after a space from "div.sidenav", identifies any HTML element inside the particular div element, with class-name "closebtn", referring to the element class attribute of " class='closebtn' " .
The close button anchor element has a position property of "position: absolute;" . For this position property to be effective, the parent containing element needs to also have a position property. In this case, the parent div sidebar has the property, "position: fixed;" .
With the "position: absolute;" property, the close button anchor element can be placed anywhere in the div sidebar without affecting the flow of the other elements within the div sidebar. The close button anchor element is placed at the top-right of the div sidebar, at 0 distance from the top of the div sidebar and 25px (to the left) from the right end (edge) of the div sidebar. The "top: 0;" and "right: 25px;" properties have to be type below the "position: absolute;" property.
On-hover Hyperlink Style
The HTML anchor element is the code for the hyperlink that the user sees. The style is:
div.sidenav a:hover {
color: #f1f1f1;
}
This style is applicable to all the anchor elements in the div sidebar, including the close button anchor element. When the mouse pointer goes over any anchor element, the text color becomes "#f1f1f1", which is very light gray.
JavaScript
In the HTML head element, the JavaScript is:
<script type="text/javascript">
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
The first function shows (displays) the div sidebar by giving it a width of 250px. Initially, this navigation div sidebar has a width of 0px, meaning it cannot be seen; and it is at the left edge of the webpage body. When the width of "250px" is given, the transition (animation) effect makes the div sidebar appear by disclosing it from the left edge, and its contents appearing. The contents do not slide in from the left edge; they appear.
The second function closes the div sidebar by giving it its original width of 0px. 0px means it occupies 0 space and cannot be seen. At 0px it has disappeared. It takes 0.5s to disappear into the left edge
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Overlay Sidebar Navigation</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.sidenav {
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;
}
div.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
div.sidenav a:hover {
color: #f1f1f1;
}
div.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<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>
<h2>Animated Overlay Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>
The reader should copy the code into a text editor. Save the file with a name having the extension, .html . Open the file in the browser. Click the menu button or the word, Open (that is, click the span element). The vertical sidebar will appear from the left edge of the page. Close the vertical sidebar by clicking its close button. This should be done to appreciate the appearance and disappearance of 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 . . .BACK NEXT