How to create an animated, closable side navigation menu with CSS?


To create an animated, closable side navigation menu, provide a mechanism to close and open it on the click on a button. The menu is opened with a button and closed with x. The event listened is used for the same and the functions are called to set the width of the navigation menu.

Let’s say the following is a button on a web page −

On clicking the above button, the side navigation opens −

Create a Button to Open the Menu

First, set a button that will open the navigation menu −

<button class="openSideNav">Click here to open sideNav</button>

On clicking the button, call the function showNav() open the navigation menu with event listener −

let openBtn = document.querySelector(".openSideNav");
openBtn.addEventListener("click", () => {
   showNav();
});

The showNav() function sets the width −

function showNav() {
   document.querySelector(".sideNav").style.width = "300px";
}

Create a Button to Close the Menu

To set the close button, use the x to close it and call a function on clicking the x −

<a href="#" class="closeBtn">×</a>

On clicking the close button x, the hideNav() function is called −

let closeBtn = document.querySelector(".closeBtn");
closeBtn.addEventListener("click", () => {
hideNav();
});

The hideNav() function sets the width to hide the menu −

function hideNav() {
   document.querySelector(".sideNav").style.width = "0";
}

Set the Navigation Menu

Since, now we know how to open and close the menu, let us see how we have set the stye for navigation −

<nav class="sideNav">

Style the Navigation Menu

The sideNav is styled as the following. Here, height: 100vh; means the height of this element is equal to 100% of the viewport height. The position is fixed since we wanted a fixed navigation menu −

.sideNav {
   height: 100vh;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: rgb(46, 218, 195);
   overflow-x: hidden;
   padding-top: 60px;
   transition: 0.5s;
}

Style the Menu Links

The links are styled like this −

.sideNav 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;
}

Example

The following is the code to create an animated, closable side navigation menu −

<!DOCTYPE html>
<html lang="en" >
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
      .sideNav {
         height: 100vh;
         width: 0;
         position: fixed;
         z-index: 1;
         top: 0;
         left: 0;
         background-color: rgb(46, 218, 195);
         overflow-x: hidden;
         padding-top: 60px;
         transition: 0.5s;
      }
      .sideNav 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;
      }
      .sidenav a:hover {
         color: #f1f1f1;
      }
      .sideNav .closeBtn {
         position: absolute;
         top: 0;
         right: 25px;
         font-size: 36px;
         margin-left: 50px;
      }
      button {
         padding: 15px;
         background-color: rgb(0, 27, 145);
         color: rgb(255, 255, 255);
         font-size: 20px;
         border: none;
         border-radius: 2%;
      }
   </style>
</head>
<body>
   <nav class="sideNav">
      <a href="#" class="closeBtn">×</a>
      <a href="#">Login</a>
      <a href="#">Register</a>
      <a href="#">Home</a>
      <a href="#">About Us</a>
   </nav>
   <button class="openSideNav">Click here to open sideNav</button>
   <script>
      let openBtn = document.querySelector(".openSideNav");
      openBtn.addEventListener("click", () => {
         showNav();
      });
      let closeBtn = document.querySelector(".closeBtn");
      closeBtn.addEventListener("click", () => {
         hideNav();
      });
      function showNav() {
         document.querySelector(".sideNav").style.width = "300px";
      }
      function hideNav() {
         document.querySelector(".sideNav").style.width = "0";
      }
   </script>
</body>
</html>

Updated on: 27-Oct-2023

241 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements