How to Create an Animated Side Navigation

An animated side navigation menu can add an extra touch of elegance to any website or web application.

In this tutorial, we will go over the steps to create an animated side navigation menu that can be used on desktop and mobile devices.

HTML Structure

To start, we will create the basic HTML structure for our side navigation menu.

This will include a wrapper, a toggle button, and the actual navigation menu.

<div class="side-nav-wrapper">
  <button class="toggle-btn">
    <i class="fas fa-bars"></i>
  </button>
  <nav class="side-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS Styles

Next, we will add the CSS styles for our side navigation menu.

This will include the styles for the wrapper, toggle button, and the actual navigation menu.

We will also add styles for the open and close states of the menu.

.side-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  overflow: hidden;
}

.toggle-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.side-nav {
  position: absolute;
  top: 0;
  left: -100%;
  width: 250px;
  height: 100%;
  background-color: #fff;
  transition: all 0.3s;
}

.side-nav.open {
  left: 0;
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.side-nav a {
  color: #333;
  text-decoration: none;
}

Javascript

Finally, we will add the Javascript to toggle the open and close states of our side navigation menu.

This can be done using the classList property of the side-nav element and toggling the “open” class.

const toggleBtn = document.querySelector(".toggle-btn");
const sideNav = document.querySelector(".side-nav");

toggleBtn.addEventListener("click", function () {
sideNav.classList.toggle("open");
});