Creating an Animated Side Navigation Menu with Overlay

In web design, creating a user-friendly and aesthetically pleasing navigation menu is crucial. One popular approach is to implement a side navigation menu that appears when a user clicks a specific button. To enhance the user experience, we can add an overlay that covers the rest of the content when the menu is open. In this blog post, we'll guide you through creating such a menu with HTML, CSS, and JavaScript.

The Basic Structure

Let's start with the basic HTML structure of our page. We'll create a side navigation menu that slides in from the left when a button is clicked:

<!DOCTYPE html>
<html>
<head>
  <!-- Meta tags and CSS styles go here -->
</head>
<body>
 <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Overlay element -->
<!-- Overlay element -->
<div id="overlay" class="overlay"></div>



<span style="font-size:30px;cursor:pointer" onclick="openNav()" class="mack">&#9776; open</span>
  <script>
    // JavaScript functions go here
  </script>
</body>
</html>

Now, let's add some CSS to style our side navigation menu and overlay:

<style>
  body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;

}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Overlay style */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3); 

  pointer-events: none; /* Allow interaction with elements under the overlay */
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>

Finally, we'll add the JavaScript code to make the menu interactive:

<script>
  function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("overlay").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("overlay").style.width = "0";
  }

  // Add a click event listener to the document
  document.addEventListener("click", function (event) {
    const sidenav = document.querySelector(".sidenav");

    // Check if the click target is not within the side navigation menu
    if (!sidenav.contains(event.target)) {
      closeNav();
    }
  });
</script>

Conclusion

With this HTML, CSS, and JavaScript code, you can create an animated side navigation menu with an overlay. When users click the "open" button, the menu slides in from the left, and the overlay darkens the background content. Clicking outside the menu or the "open" button will close the menu.

Feel free to customize the styles and content to fit your website's design and requirements. This interactive menu can significantly improve user navigation and overall user experience on your website.

Implementing such features can help your website stand out and provide a polished and user-friendly interface for your visitors.

iRuemu Coding Blog

iRuemu Coding Blog

Creating an Animated Side Navigation Menu with Overlay

Table of contents

The Basic Structure

Styling the Side Navigation Menu

JavaScript for the Interactive Menu

Conclusion