Create Responsive Animated Fullscreen Navigation Menu using HTML, CSS & JavaScript

In this article, we will see how to create responsive animated fullscreen sidebar navigation menu using HTML, CSS & JavaScript.

HTML

<div class="navigation">
  <div class="ham-btn" onclick="showNav()">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="links">
    <div class="link">
      <a href="#">Home</a>
    </div>
    <div class="link">
      <a href="#">Dashboard</a>
    </div>
    <div class="link">
      <a href="#">About</a>
    </div>
    <div class="link">
      <a href="#">Contact</a>
    </div>
  </div>
</div>
<div class="content">
  <h1>This is title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur impedit quaerat repellendus, ipsa consequuntur eos voluptatibus excepturi officia ea magni, quisquam minus, dolorum rem at ducimus ratione dolore quas necessitatibus.</p>
</div>

CSS

body {
  margin:0px;
  font-family:"Open Sans",sans-serif;
}
.content {
  padding:20px;
  font-size:18px;
}
.navigation {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#111;
  z-index:200;
  clip-path:circle(25px at calc(100% - 45px) 45px);
  transition:all 500ms ease-in-out;
}
.navigation.active {
  clip-path:circle(75%);
}
.navigation .ham-btn {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  border-radius:50%;
  cursor:pointer;
}
.navigation .ham-btn span {
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  width:50%;
  height:2px;
  background:#f5f5f5;
  transition:all 200ms ease-in-out;
}
.navigation .ham-btn span:nth-child(1) {
  top:30%;
}
.navigation .ham-btn span:nth-child(2) {
  top:50%;
}
.navigation .ham-btn span:nth-child(3) {
  top:70%;
}

.navigation.active .ham-btn span:nth-child(1) {
  top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.navigation.active .ham-btn span:nth-child(2) {
  display:none;
}
.navigation.active .ham-btn span:nth-child(3) {
  top:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
}

.navigation .links {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.navigation .links a {
  position:relative;
  display:inline-block;
  margin:20px 0px;
  font-size:20px;
  font-weight:600;
  text-decoration:none;
  color:#f5f5f5;
  text-transform:uppercase;
  letter-spacing:5px;
}
.navigation .links a:after {
  content:"";
  position:absolute;
  left:0px;
  bottom:-5px;
  height:2px;
  width:0%;
  background:tomato;
  transition:all 300ms ease-in-out;
}
.navigation .links a:hover:after {
  width:100%;
}

JS

function showNav(){
  document.getElementsByClassName("navigation")[0].classList.toggle("active");
}