Hamburger menu concept

by lasha

HTML

<div class="container">
  <div class="navigation-pseudo">
    <div class="nav-item line-1"></div>
    <div class="nav-item line-2"></div>
  </div>
  <div class="navigation">
    <div class="nav-item line-1">
      <span>Home</span>
    </div>
    <div class="nav-item line-2">
      <span>About</span>
    </div>
    <div class="nav-item line-3">
      <span>Contact</span>
    </div>
    <div class="nav-item line-4">
      <span>Work</span>
    </div>
    <div class="nav-item line-5">
      <span>Services</span>
    </div>
    <div class="nav-item line-6">
      <span>Resources</span>
    </div>
  </div>
  
  <div class="content">
    <h1>Hamburger Concept</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt vel explicabo consectetur blanditiis suscipit ex eum. Illum, animi soluta molestias eaque! Ab quo deserunt impedit inventore perspiciatis aut placeat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quas veniam, quo tempora qui alias temporibus facere provident, officiis architecto ab placeat deserunt modi dolorem maxime? Officia accusamus repudiandae nesciunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quas veniam, quo tempora qui alias temporibus facere provident, officiis architecto ab placeat deserunt modi dolorem maxime? Officia accusamus repudiandae nesciunt.</p>
  </div>
</div>

CSS

body {
  background-color: #ececec;
  margin: 0;
  font-family: Arial;
}
.container {
  position: relative;
  max-width: 500px;
  margin: 10px auto 0;
  background-color: #e1e1e1;
  padding: 10px;
  border: 2px solid #bbb;
  min-height: 100px;
}
.container:after {
  content: "";
  position: fixed;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-color: rgba(225,225,225,0.7);
  z-index: 9;
  transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out 0.2s;
  opacity: 0;
}
.container.nav-open:after {
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s ease-in-out, height 0s ease-in-out 0s;
}
.navigation-pseudo {
  z-index: 11;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0s;
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.navigation-pseudo.active {
  transition-delay: 0.4s;
  opacity: 1;
}
.navigation-pseudo .nav-item {
  width: 100%;
  height: 5px;
  background-color: #555;
  margin-bottom: 3px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  top: 50%;
}
.navigation-pseudo .line-1 {
  transform: translateY(-50%) rotate(-45deg);
}
.navigation-pseudo .line-2 {
  transform: translateY(-50%) rotate(45deg);
}
.navigation {
  z-index: 12;
  position: absolute;
  right: 10px;
  width: 30px;
  height: 22px;
  overflow: hidden;
  transition: width 0.2s ease-in-out, right 0.2s ease-in-out 0s;
  cursor: pointer;
  transition-delay: 0.4s;
  color: #fff;
}
.navigation .nav-item {
  width: 100%;
  height: 5px;
  background-color: #555;
  margin-bottom: 3px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  transition-delay: 0.2s;
}
.navigation .nav-item:nth-child(n+4) {
  opacity: 0;
  visibility: hidden;
}
.navigation .nav-item span {
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0s;
  opacity: 0;
  position: relative;
  display: block;
  text-align: center;
  transform: translateY(-50%);
  top: 50%;
}
.navigation.active {
 ...

JavaScript

$('.navigation').on('click', function(){
  $(this).toggleClass('active');
  $('.navigation-pseudo').addClass('active');
  $('.container').addClass('nav-open');
  console.log("nav clicked")
});

$('.navigation-pseudo').on('click', function(){
  $(this).removeClass('active');
  $('.navigation').removeClass('active');
  $('.container').removeClass('nav-open');
  console.log("nav-pseudo clicked")
});