Posted By
Bajarangi soft ,
Posted On 05-10-2020
Create a Curtain Menu
Step 1: Create index.html and implement below code
<!-- The overlay -->
<div id="Nav" class="overlay">
<!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<!-- Overlay content -->
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("Nav").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("Nav").style.width = "0%";
}
Complete Code For Creating Curtain Navigation Menu Using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>How To Create Collapsible Sidepanel Menu Using JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
text-align: center;
}
body {
font-family: 'Lato', sans-serif;
}
.myNav1 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.myNav1_content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.myNav1 a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.myNav1 a:hover, .myNav1 a:focus {
color: #f1f1f1;
}
.myNav1 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.myNav1 a {
font-size: 20px
}
.myNav1 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.myNav2 {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.myNav2_content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.myNav2 a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.myNav2 a:hover, .myNav2 a:focus {
color: #f1f1f1;
}
.myNav2 .closebtn2 {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.myNav2 {
overflow-y: auto;
}
.myNav2 a {
font-size: 20px
}
.myNav2 .closebtn2 {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.myNav3 {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.myNav3_content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.myNav3 a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.myNav3 a:hover, .myNav3 a:focus {
color: #f1f1f1;
}
.myNav3 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.myNav3 a {
font-size: 20px
}
.myNav3 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div class="container">
<br>
<br>
<br>
<div class="text-center">
<h1>How To Create Curtain Navigation Menu Using JavaScript</h1>
</div>
<div class="well">
<button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav1()">☰ Right side bar
</button>
<button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav2()">☰ slide Down
</button>
<button style="font-size:30px;cursor:pointer" class="btn btn-info" onclick="openNav3()">☰ Show(Without
Animation)
</button>
</div>
<!-- first menu-->
<div id="myNav1" class="overlay myNav1">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
<div class="overlay-content myNav1_content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!--second menu-->
<div id="myNav2" class="overlay myNav2">
<a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">×</a>
<div class="overlay-content myNav2_content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!--third menu-->
<div id="myNav3" class="overlay myNav3">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
<div class="overlay-content myNav3_content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div>
</body>
</html>
<script>
function openNav1() {
document.getElementById("myNav1").style.width = "100%";
}
function closeNav1() {
document.getElementById("myNav1").style.width = "0%";
}
function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
function openNav3() {
document.getElementById("myNav3").style.display = "block";
}
function closeNav3() {
document.getElementById("myNav3").style.display = "none";
}
</script>