How to Create a Full Screen Overlay Navigation Closable Menu 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 Menu 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 menu bar covers the entire screen body. It will open continuously from the left. The transition time is 0.5s. This continuous opening within the time, 0.5s is the animation. The full screen overlay bar has an X button at its top-right corner. When this X button is clicked, the complete overlay bar closes back into the left edge of the screen body in 0.5s; well that is still part of the animation. The opened full screen bar has hyperlinks at its center.
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 icon or the word, Open. The complete bar will appear from the left edge of the page to cover the page. Close the complete bar by clicking its close button. This should be done to appreciate the appearance and disappearance of the full screen overlay bar. 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 (tags) in the HTML head element above. This project (example) 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, that will be coded in the body element. An anchor element is the same as a hyperlink. Put another way, an anchor element is the code form of a hyperlink.
Strategy
The menu bar is a div element with class-name "overlay". The strategy is to give this div a height of 100% and a width of 0%. With the width of 0%, 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 cover the whole body element, it is given a width of 100%. The transition property will make it to cover the screen from the left, in 0.5s.
The Body Content
The code for the body content is:
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
The sidebar is a div element. The div element has the id "myNav" and the class "overlay", which refers to a CSS rule for the overall presentation of the bar. There is an internal div with class "overlay-content", which refers to the CSS rule for the presentation of the navigational anchor elements. The X button is also an anchor link, but it is a non-navigation anchor element. This is typed before the internal div in the code. It is a non-navigational anchor element, because when it is clicked, it calls the JavaScript function closeNav(), and does not open any webpage.CSS rules are generally in the style element. When the close X button is clicked, it closes the bar, after it has been opened to overlay the whole 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 bar. 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 anywhere else.
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. There are four of them and they are in the inner div. 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 (anchor) element. The number code for the menu icon (character) is "☰" . It is subjected to CSS properties of any character, such as font-size, actually "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 bar to completely fill the screen.
The span element has the onclick event which calls the JavaScript function, openNav() to open the bar. 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 Internal div Style
The Internal Navigation div, with class-name "overlay-content" that contains the navigation anchor elements, is:
div.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
It has a relative position property. This means that it should appear where it is typed int the code. However, the top, right, bottom, and left properties typed after, can be used to displace it. No other HTML element around it can be adjusted to go into the space left by the displaced element. Among the four side properties, only the top property has been used here, to displace the div.overlay-content element by 25% down, from the top of its containing parent element, which is: "div.overlay".
The width is 100% of its containing parent element. However, since all the anchor elements are made block (see below), the anchor elements will be placed one below the other. The text-align property value is center. So the anchor elements will lie one below the other and each will be centered in the 100% width of this inner div.
The top margin of this inner div is 30px, further bringing its content (the anchor elements) down in the screen.
The lowest point (height) of this inner div is determined by its content (anchor elements). What really matters so far as dimensions are concerned, is its width (100% and fills the outer width when displayed).
The Outer div Bar Style
The CSS rule for the outer div is:
div.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
It is the outer div that extends, and by design of the inner div, the inner div just fits at 100% width, into the outer div, at whatever stage of extension, the outer div finds itself.
The initial height before and after transition of the outer div, is 100% of the HTML body height. Before transition, the width is 0%. After transition, the width is determined by JavaScript (see below) to be 100%. This is an overlay bar (outer div), 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 outer div, is made 0px; the distance from the left of the body element to the left of the outer div is made 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 inner div is completely transparent. The background color for the outer div is rgba(0,0,0, 0.9), which is black but with a bit of transparency. Since the outer div will cover the HTML body element completely, the small transparency enables the user to see a bit through the outer div to the HTML body.
Before the outer div appears in front of the webpage body, its width is 0%. However it has content (the inner div with the anchor elements). Before the covering, though at 0% width, the contents of the outer div are overflowing out of the 0% width to the right, covering some content of the body element. To prevent this, use the property, "overflow-x: hidden;". With that, the div sidebar content (inner div with 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
Style for Anchor Elements in the Inner div
Each of the five hyperlink anchor elements (including the close button anchor link) in the outer div, uses the following CSS rule:
div.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
Note that the class-name, "overlay" here, refers to the outer div. The outer div nests the inner div which has four anchor elements. The close button anchor element is outside the inner div, but inside the outer div. In this situation, the "div.overlay a" CSS rule is applicable to any anchor element outside or inside the inner div, but inside the outer div.
Around the text as content of each 'a' element, is the padding "8px;" .
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;" .
The font-size of all the characters as content, in the anchor elements, is 36px.
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, the font-size of all the characters as content, in the anchor elements, including the close button character, is 36px. The font-size of the close button character is ultimately overridden by the "closebtn" CSS rule to 60px(see below).
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 its div container, 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 outer div 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 continuous disclosure of rightward content, by vertical lines. 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 after the span element is clicked, 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 outer div is complete. The anchor elements in the inner div are always at the center of the inner and outer div, independent of whatever width the outer div has. Do not forget that the width of the inner div is 100% that of the outer div, and so both widths are the same. After the anchor elements have completely appear in their center position, they move to the right, while the width of the outer div is still being defined (increased). In that way, the outer div appears to slide rightwards, as it opens. It is the anchor elements with their inner div, that effectively do some sliding.
Style for Close Button
The CSS rule for the Close Button anchor element is:
div.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
It comes with an overridden font-size of 60px, compared with the other anchor elements in the inner div. The selector code is: "div.overlay .closebtn" . "overlay" just next to "div" identifies the particular div element, in this case, the outer div. ".closebtn" after a space from "div.overlay", 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 (outer div) needs to also have a position property. In this case, the parent div has the property, "position: fixed;" .
With the "position: absolute;" property, the close button anchor element can be placed anywhere within the outer div without affecting the flow of the other elements within the outer div. The close button anchor element is placed at the top-right of the outer div, at 20px distance from the top of the outer div, and 45px (to the left) from the right end of the outer div. The "top: 20;" and "right: 45px;" properties have to be type below the "position: absolute;" property.
On-hover and Focus Hyperlink Styles
The HTML anchor (a) element is the code of the hyperlink that the user sees. The :hover and the :focus classes are actually pseudo (imitated) classes (class-names). Here they are pseudo classes to each 'a' element, and not to the outer div. The styles for all the anchor elements including the close button is:
div.overlay a:hover, div.overlay a:focus {
color: #f1f1f1;
}
The div that both "a:hover" and "a:focus" are applicable here, is the one with the class-name, "overlay", the outer div . Here, "a:hover" and "a:focus" can be considered as HTML elements inside the outer div. An element inside the inner nested div is also an element inside the outer nesting div. This style (CSS rule) is applicable to all the anchor elements in the outer div and nested div, meaning it is applicable to the close button anchor element. Because of "a:hover" in the selector, when the mouse pointer goes over any anchor element, its text color becomes "#f1f1f1", which is very light gray. Because of "a:focus" in the selector, when any anchor element is clicked, its content text color remains at #f1f1f1 .
JavaScript
In the HTML head element, the JavaScript is:
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
The first function shows the outer div by giving it a width of 100%. Initially, this div with all its content, including the inner nested div, has a width of 0%, meaning it (and its content) cannot be seen; but it is at the left edge of the webpage body, with 0px width. When the width of "100%" is given, the transition (animation) effect produces the outer div and its content, by disclosing it from the left edge (vertical line by vertical line).
The second function closes the outer div and all its content, by giving it its original width of 0%. 0px or 0% means it occupies 0 space and cannot be seen. At 0px it has disappeared.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Overlay 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.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
div.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
div.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
div.overlay a:hover, div.overlay a:focus {
color: #f1f1f1;
}
div.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</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 icon or the word, Open. The complete bar will appear from the left edge of the page to cover the page. Close the complete bar by clicking its close button. This should be done to appreciate the appearance and disappearance of the full screen overlay bar.
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