Stylish Animated Side 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: #40467a;
  border-radius: 3px;
  text-align: center;
  color:#fff;
}
h1 {
  margin: 0 0 30px;
  font-size: 27px;
}
@media (max-width: 800px) {
  body {
    font-size:16px;
  }
  main {
    max-width: 500px;
    font-size: 17px;
  }
}
</style>

</head>
<body>

<div class="navigationbar">
<nav class="menunav">
    <div class="hamburger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
    <h1><a href="#">Site Title</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Tags</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</div>

<main>
    <h1>Responsive Animated Side Menu</h1>
    <p>A responsive animated Side Menu navigation with CSS and Javascript. Side Menu that animated from the left side of the screen and covers part of your main content when you click the Menu button.</p>
    </main>

</body>
</html>

/* CSS Source Code */
.navigationbar {
  width: 100%;
  background: #8c45c6;
  height: 60px;
}

.menunav {
  width: 100%;
  height: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.menunav h1 {
  margin: 13px 30px 0;
  font-size: 27px;
  display: inline-block;
}

.menunav h1 a {
  text-decoration: none;
  color: #fff;
}

.menunav ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menunav ul li {
  display: inline-block;
  list-style: none;
}

.menunav ul li a {
  padding: 17px 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  color: #fff;
}

.menunav ul li a:hover {
  background: #5b5656;
}

.hamburger {
  display: none;
}

@media screen and (max-width: 800px) {
  .hamburger {
    cursor: pointer;
    float: right;
    margin: 10px 20px;
    display: block;
  }

.line1,
  .line2,
  .line3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
  }

.cross .line1 {
    transform: rotate(-45deg) translate(-9px, 6px);
  }

.cross .line2 {
    opacity: 0;
    background-color: white;
  }

.cross .line3 {
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: white;
  }

.menunav ul {
    height: 100%;
    margin: 18px 0 0;
    padding: 0;
    box-sizing: border-box;
    display: block;
    max-width: 320px;
  }

.menunav ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
  }

.menunav ul li a {
    padding: 17px 0;
    width: 100%;
  }

.menunav ul li.active {
    transform: translateX(0);
    border-bottom: 1px solid #7d98b4;
  }

.menunav ul li:nth-child(1) {
    background-color: #4473AF;
    transition-delay: 0.08s;
  }

.menunav ul li:nth-child(2) {
    background-color: #9652A4;
    transition-delay: 0.16s;
  }

.menunav ul li:nth-child(3) {
    background-color: #4473AF;
    transition-delay: 0.24s;
  }

.menunav ul li:nth-child(4) {
    background-color: #4FA038;
    transition-delay: 0.32s;
  }

.menunav ul li:nth-child(5) {
    background-color: #4473AF;
    transition-delay: 0.40s;
  }

.menunav ul li:nth-child(6) {
    background-color: #44AF91;
    transition-delay: 0.47s;
  }

}

This is A Stylish Animated Side Menu Navigation. Complete preview with syntax highlighting of html, css, js or javascript source code.