Responsive & Animated Slides Out Menu Navigation

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<style>
body {
  font-family: arial;
  font-size:18px;
  background: #efefef;
  margin: 0;
}
main {
  margin: 150px auto;
  max-width: 800px;
  padding: 2rem;
  background-color: #2d6565;
  border-radius: 3px;
  text-align: center;
  color:#fff;
}
h1 {
  margin: 0 0 30px;
}
@media (max-width: 800px) {
  body {
    font-size:16px;
  }
  main {
    max-width: 500px;
  }
}
</style>

</head>
<body>

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
    
    <main>
    <h1>Slide Menu Navigation</h1>
    <p>A minimal and responsive with CSS and Javascript. Menu Navigation that slides out from the right side of the screen and covers part of your main content when you click the Menu button.</p>
    </main>

</body>
</html>

/* CSS Source Code */
.customNav {
  background-color: #fff;
  box-shadow: 0 4px 7px rgba(45, 44, 44, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20px;
}

.customNav .burger {
  border: 0;
  cursor: pointer;
  display: none;
  font-size: 22px;
  position: relative;
  padding: 0;
  outline: none;
  height: 30px;
  width: 30px;
}

.customNav .burger:active {
  color: #0594ec;
  outline: none;
}

.customNav .burger .bar {
  background-color: #9b9c9c;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  height: 3px;
  width: 20px;
  transition: transform 0.2s ease;
}

.customNav .burger .bar:first-of-type {
  top: 40%;
}

.customNav .burger .bar:last-of-type {
  top: 60%;
}

.customNav ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  max-width: 1366px;
}

.customNav ul li {
  margin: 0 10px;
}

.customNav ul li a {
  color: #2c405e;
  position: relative;
  text-decoration: none;
  padding: 13px 10px;
  display: inline-block;
  width: 100%;
  font-size: 18px;
  text-align: center;
}

.customNav ul li a:hover {
  color: #fff;
  background: #135ea0;
}

.customNav ul li a::after {
  content: "";
  background-color: #2c405e;
  position: absolute;
  bottom: 0px;
  left: 0;
  opacity: 0;
  height: 2px;
  width: 100%;
  transition: transform 0.2s ease;
}

.customNav ul li a:hover::after {}

@media screen and (max-width: 700px) {
  .customNav {
    padding: 10px;
    position: relative;
  }

.customNav .burger {
    display: block;
  }

.customNav .burger.show-x .bar:first-of-type {
    transform: translate(-50%, 50%) rotate(225deg);
  }

.customNav .burger.show-x .bar:last-of-type {
    transform: translate(-50%, -150%) rotate(-225deg);
  }

.customNav ul {
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    text-align: center;
    position: fixed;
    top: 70px;
    left: 4%;
    transform: translateX(120%);
    width: 80%;
    transition: transform 0.3s ease-in;
    z-index: 100;
  }

.customNav ul.show {
    transform: translateX(0);
  }

.customNav ul li {
    margin: 0;
    border: 1px solid #eee;
  }

.customNav ul li a {
    padding: 13px 0;
  }
}

This is A Responsive & Animated Slides Out Menu Navigation, complete preview with syntax highlighting of html, css, js or javascript source code.