How to Create a Slide Down Full Screen Curtain Navigation Menu
Curtain Navigation Menu
How To, for Web Applications
By: Chrysanthus Date Published: 2 Apr 2025
When a menu icon or its associated text is clicked, a slightly transparent curtain will extend downwards slowly, to fill the screen. The curtain has hyperlinks arranged vertically, around its center. The curtain has a close button at its top-right corner. When the close button is clicked, the curtain will retract slowly upwards into the top edge of the webpage. This tutorial explains how to create that effect
The word, "navigation" as used here, means that the main content of the curtain, are hyperlinks.
At the bottom 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 menu icon or its associated text, Open. The curtain should slide down in 0.5s to fill the screen. Click the close button of the curtain, and the curtain should slide back to the top edge of the page, also in 0.5s. The reader is advised to do this 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>Downwards Curtain Menu</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 curtain to come down and to cause the curtain to go back up. The curtain is an HTML div element. The HTML body element will have the curtain div and the rest of the webpage content.
The Body Element Content
The content of the HTML body element 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 downwards from the top:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
The curtain is an HTML div element. It has the ID, "myNav" and the class-name, "overlay". The first element in the curtain 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 curtain; see below.
The curtain div has an inner div with class-name, "overlay-content" . This inner div has the hyperlinks. The code for the hyperlink is the anchor (a) element.
In the main document of the webpage (in the body element) is a span element. This span element has the menu icon code, "☰" and the word, "Open" as its content. The code will appear as the menu icon. When either the menu icon or the text, "Open" is clicked, the JavaScript function, openNav() will be called to bring down the curtain, see below.
The HTML style Element Content
The styling of the curtain div and the inner anchor elements div, is done within the tags of the style element. The styling of the span element is done inline; see above.
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 Curtain div
The CSS rule for the curtain div is:
div.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow: hidden;
transition: 0.5s;
}
Since the curtain will come from the top, it has a height of 0px, when it is not descending. The width is 100% and will always remain 100%. 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 curtain has to appear in front of the body element and its contents. The distance between the top end of the webpage and the top end of the curtain div is 0px. The distance between the left end of the webpage and the left end of the curtain div is 0px.
The background color of the curtain div is black, with a bit of transparency (0.9). At this point the height of the curtain div is 0px. So the contents it has, such as the inner div, overflows downwards. So, at this point, the contents of the curtain div has to be hidden; hence the property, "overflow: hidden;" . The curtain will take 0.5s to extends completely downwards and 0.5s to retract ; hence the property, "transition: 0.5s;".
CSS Rule for the Hyperlinks' div
The CSS rule for the inner div that has the anchor elements is:
div.overlay-content {
position: relative;
margin-top: 30px;
top: 25%;
width: 100%;
}
In the HTML body element, there is the attribute, "class='overlay-content'" for the inner div, that has the anchor elements. The class-name for the inner div is, 'overlay-content' . This div has the "position: relative;" property and value, so that it can be displaced. This div has a top-margin of 30px (part of the displacement, indirectly). The top of its top margin, is 25% down (displacement) from the top of its parent element, which is the curtain div (div.overlay).
The width is 100%. This means that it will also extend from the left end of the webpage to the right end of the webpage. Do not forget that this inner div is part of the curtain.
Styling Each Anchor Element
There are four anchor elements in the project, and all of them are in the inner div (div.overlay-content). The CSS rule for each of them is:
div.overlay a {
padding: 8px;
font-size: 36px;
color: #818181;
display: block;
text-align: center;
text-decoration: none;
transition: 0.3s;
}
The padding of the four sides of each anchor element is 9px. The font-size is 36px. The color of the text is #818181 (light gray).
The display of each of the anchor elements is block, meaning that each will take one full horizontal line, from the left end of the webpage to the right end of the webpage. And they will appear vertically. The text of each anchor element is centered in the horizontal line. No text in any anchor element is underlined.
When the menu icon is clicked, each anchor element will take 0.3s to appear, while the curtain div will take 0.5s to extend to the bottom of the page. When the close button is clicked, each anchor element will take 0.3s to disappear, while the curtain div will take 0.5s to retract to the top edge of the webpage.
On-hover and On-focus CSS Rule
div.overlay a:hover, div.overlay a:focus {
color: #f1f1f1;
}
When the mouse pointer goes over an anchor element (hyperlink), the color becomes #f1f1f1 (whitish). When the anchor element gains focus, either by clicking it or by arriving at it by repeatedly pressing the Tab key, the color still becomes #f1f1f1.
Styling the Close Button
The first element in the curtain 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.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
The position is absolute, which means it will be placed in front (and not in the same surface) of the curtain div. Its top end will be 20px below the top end of the curtain div. Its right end will be 45px to the left of the right end of the curtain div. Its font-size is 60px (quite big). Now, this anchor element is a child element of the curtain div. For it to have the absolute position property, its parent element should have a position property. The position property that the parent element (curtain div) has, is the fixed position property.
JavaScript
The code for the curtain div 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>
When the close button anchor element is clicked, it calls the JavaScript closeNav() function. The code for the span element in the main part of the webpage is:
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
When the span element is clicked, it calls the JavaScript openNav() function. So the JavaScript has two functions, which are openNav() and closeNav(). The JavaScript is:
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
When the span element is clicked, the openNav() function gives the curtain, a height of 100%. The curtain comes down in 0.5s . When the close button is clicked, the curtain is given a height of 0px. The curtain goes back up in 0.5s .
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Downwards Curtain Menu</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: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
div.overlay-content {
position: relative;
margin-top: 30px;
top: 25%;
width: 100%;
}
div.overlay a {
padding: 8px;
font-size: 36px;
color: #818181;
display: block;
text-align: center;
text-decoration: none;
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.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "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 downwards from the top:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</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 menu icon or its associated text, Open. The curtain should slide down in 0.5s to fill the screen. Click the close button of the curtain, and the curtain should slide back to the top 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