How to create curtain navigation menu?
The curtain navigation menu will overlay on the entire screen by pushing back the current page. Curtain menus are in trend and widely used in web designing. We can create this curtain menu with CSS and some JavaScript to toggle the menu.
Creating a curtain menu
Take an <div> element and add <a> inside it to create the menu. Add a close button in the menu. Wrap the close button and links in the parent <div>. Add a button that toggles the menu. Now use the CSS property to style the HTML elements.
- Set the
height and width of the parent container. Position it at the top using z-index: 1. Also add position, top, and button values accordingly. Set the transition delay and hide the overflow.
- Position the menu content using
margin , top and text-align property.
- Remove the
text-decoration from the links and add some color, font-size and padding to it. Use display: block to display links vertically.
- Use
position: absolute to place the close button on the overlay.
- Use s
tyle.width=100% to open the menu and style.width=0% to close the menu.
Example: Creating a curtain menu with CSS
In this example, we have created a curtain menu that slides from the left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.menu-overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6);
overflow-x: hidden;
transition: 0.4s;
}
.menu-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
}
a:hover, a:focus {
color: blue;
}
.overlay-menu .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
span {
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myMenu" class="menu-overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">×</a>
<div class="menu-content">
<a href="#"> Course </a>
<a href="#"> study Material</a>
<a href="#"> About us </a>
</div>
</div>
<p> Click on menu to open navigation </p>
<span onclick="openMenu()">Menu☰</span>
<script>
/* Open when someone clicks on the span element */
function openMenu() {
document.getElementById("myMenu").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeMenu() {
document.getElementById("myMenu").style.width = "0%";
}
</script>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a curtain menu sliding from the top
To slide the menu from the top change the height of the menu to 0% and width to 100%. Add style.height=100% to open the menu and style.height=0% to close menu within the <script>
Conclusion
In this tutorial, we have learned to create a curtain menu navigation with CSS and JavaScript. The curtain menu can be slide from top or left. It also includes a close button to close the menu.
