Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a curtain navigation menu with CSS and JavaScript?
In this article, we will learn how to create a curtain navigation menu using HTML, CSS and JavaScript.
The curtain navigation menu will overlay on the entire screen by pushing back the current page. These menus display the sub-links of a link to make the navigation more specific.
To create curtain navigation, we have to do the same as we had done earlier. In curtain navigation, we have two buttons one is an open button (menu) and the other one is a close button (cross).
When you click on the open button the navigation will be visible on the screen or if you are clicked on the close button then the navigation will be hidden from the screen.
In this example, we are creating a webpage displaying the "curtain navigation menu". A menu with 4 links will appear after a click.
HTML Structure
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required the text, curtain navigation, and empty navigation Links for the menu.
<!-- HTML --> <nav class="side-nav"> <a href="#" class="cls_btn">×</a> <a href="#">Home</a> <a href="#">Tutorials</a> <a href="#">AboutUs</a> <a href="#">ContactUs</a> </nav> <button class="opn_btn">?</button>
CSS Styling
Add CSS style to give a background and hover effect on the curtain navigation menu for a better look. In this example, we are styling the curtain navigation menu if hovering over the link background color will be changed.
/* CSS */
.side-nav {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(46, 218, 100, 0.629);
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: block;
transition: 0.3s;
text-align: center;
}
.side-nav a:hover {
color: #f1f1f1;
}
.side-nav .cls_btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
button {
padding: 5px 10px;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
border: none;
border-radius: 2px;
}
JavaScript Functionality
Using JavaScript we can perform validation and handle events on the page. In this example, creating the open and closed buttons. The navigation will be opened by clicking on the menu bar button, and closed by clicking the cross button.
// JavaScript
let opn_Btn = document.querySelector(".opn_btn");
let cls_Btn = document.querySelector(".cls_btn");
opn_Btn.addEventListener("click", () => {
document.querySelector(".side-nav").style.width = "100%";
});
cls_Btn.addEventListener("click", () => {
document.querySelector(".side-nav").style.width = "0";
});
From the above JavaScript code, you can understand how we are showing and hiding the navigation menu by manipulating the width property of the side navigation element.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Curtain Navigation</title>
<style>
/* CSS */
body {
margin: 0;
font-family: Arial, sans-serif;
padding: 20px;
}
.side-nav {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(46, 218, 100, 0.9);
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: block;
transition: 0.3s;
text-align: center;
}
.side-nav a:hover {
color: #f1f1f1;
background-color: rgba(0, 0, 0, 0.2);
}
.side-nav .cls_btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.opn_btn {
padding: 10px 15px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}
.opn_btn:hover {
background-color: #555;
}
.content {
margin-top: 20px;
}
</style>
</head>
<body>
<button class="opn_btn">? Menu</button>
<div class="content">
<h1>Curtain Navigation Demo</h1>
<p>Click the menu button to open the curtain navigation.</p>
</div>
<nav class="side-nav">
<a href="#" class="cls_btn">×</a>
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</nav>
<script>
let opn_Btn = document.querySelector(".opn_btn");
let cls_Btn = document.querySelector(".cls_btn");
opn_Btn.addEventListener("click", () => {
document.querySelector(".side-nav").style.width = "100%";
});
cls_Btn.addEventListener("click", () => {
document.querySelector(".side-nav").style.width = "0";
});
</script>
</body>
</html>
How It Works
The curtain navigation works by manipulating the CSS width property through JavaScript. Initially, the navigation has a width of 0, making it invisible. When the menu button is clicked, JavaScript sets the width to 100%, causing the navigation to slide in from the left with a smooth transition effect.
Key Features
- Fixed positioning: The navigation overlay stays in place while scrolling
- Smooth transitions: CSS transitions provide smooth opening and closing animations
- Full-screen coverage: The menu covers the entire viewport when opened
- Responsive design: Works across different screen sizes
Conclusion
The curtain navigation menu provides an elegant way to hide navigation links until needed. By combining CSS positioning, transitions, and JavaScript event handling, you can create a smooth overlay navigation that enhances user experience without cluttering the main content area.
1K+ Views
