How to create a curtain navigation menu with CSS and JavaScript?

Javascript Web Development Front End Technology

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.

Example.html

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.

<body>
   <!-- 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>

Example.css

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.

<style>
   /*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;
   }
</style>

Example.js

Using Javascript we can perform validation and the handle event 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 -->
<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>

From the above javascript code, you can understand how we are showing and hiding the navigation menu.

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*/

   .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;
   }
   </style>
</head>
<body>
   <!-- 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>
   <!--JavaScript -->
   <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>