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>