<div class="container">
  <div class="header">
    <div class="logo">Logo</div>
    <button class="hamburger hamburger--slider" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Item name</a></li>
      <li><a href="#">Item name</a></li>
      <li><a href="#">Item name</a></li>
      <li><a href="#">Item name</a></li>
      <li><a href="#">Item name</a></li>
    </ul>
  </div>
  <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui rem porro quae quis nostrum, enim voluptate corporis quasi tenetur est adipisci accusamus fugiat ipsum, cupiditate, deleniti earum obcaecati vitae nisi ex vero necessitatibus amet dolore
    nulla facilis? Fuga sit est laborum. Ratione alias officiis, hic rerum accusantium praesentium est deleniti nihil quisquam illum, similique debitis ex, esse eum? Doloribus mollitia labore tempore aliquid veritatis, rerum provident nisi unde quasi,
    cumque totam deserunt. Numquam cum maiores perferendis esse molestiae quibusdam dolore sed doloribus iste beatae, ad aspernatur eligendi ex, cumque harum delectus cupiditate. Placeat labore, distinctio excepturi perspiciatis aspernatur alias atque.</div>
</div>
body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.container {
  position: relative;
}

.header {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.logo {
  color: #fff;
  padding: 0 20px;
  font-size: 24px;
}

.header.active {
  background-color: rgba(0, 0, 0, 1);
  position: relative;
}

.menu {
  background-color: #000;
  padding: 10px;
  display: none;
}

.menu.active {
  display: block;
}

.menu ul {
  padding: 0;
  margin: 0;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-family: sans-serif;
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 5px;
  transition: all 0.5s;
}

.menu a:hover {
  background-color: #ccc;
  color: #000;
}

.menu ul li:last-child a {
  border-bottom: none;
}

.content {
  height: 500px;
  background-color: lightblue;
  color: #fff;
  padding-top: 65px;
  padding-left: 10px;
  padding-right: 10px;
}

.content.active {
  padding-top: 0;
}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  outline: none;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger.is-active:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -10px;
}
.hamburger-inner::after {
  bottom: -10px;
}

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
  top: 2px;
}
.hamburger--slider .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}
.hamburger--slider .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--slider.is-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}
.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

$(document).ready(function() {
  $(".hamburger").on("click", function() {
    $(this).toggleClass("is-active");
    $(".menu").slideToggle(300);
    $(".header, .content").toggleClass("active");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js