100 Days of CSS: Day 2

Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher

Project Structure

The project consists of 3 main files _ index.html - the HTML structure. _ style.css - for styling. * script.js - for interactivity.

HTML Structure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

<div class="frame">
  <div class="center">
    <a href="#" class="burger-container">
      <div class="burger-line"></div>
      <div class="burger-line"></div>
      <div class="burger-line"></div>
    </a>
  </div>
</div>

CSS Styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #3faf82;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.burger-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80px;
  height: 60px;
}
.burger-line {
  position: absolute;
  width: 80px;
  height: 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 4px #555;
}
.burger-line:nth-child(1) {
  animation: line1-animation 1s forwards;
}
.burger-line:nth-child(2) {
  animation: line2-animation 1s forwards;
}
.burger-line:nth-child(3) {
  animation: line3-animation 1s forwards;
}

.burger-container.close .burger-line:nth-child(1) {
  animation: line1-close-animation 1s forwards;
}
.burger-container.close .burger-line:nth-child(2) {
  animation: line2-close-animation 1s forwards;
}
.burger-container.close .burger-line:nth-child(3) {
  animation: line3-close-animation 1s forwards;
}

@keyframes line1-close-animation {
  0% {
    transform: translatey(-20px);
  }
  50% {
    transform: translatey(0px);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes line2-close-animation {
  0% {
    transform: scale(100%);
  }
  100% {
    transform: scale(0%);
  }
}

@keyframes line3-close-animation {
  0% {
    transform: translatey(20px);
  }
  50% {
    transform: translatey(0px);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes line1-animation {
  0% {
    transform: rotate(45deg);
  }
  50% {
    transform: translatey(0px) rotate(0deg);
  }
  100% {
    transform: translatey(-20px);
  }
}

@keyframes line2-animation {
  0% {
    transform: scale(0%);
  }
  100% {
    transform: scale(100%);
  }
}

@keyframes line3-animation {
  0% {
    transform: rotate(135deg);
  }
  50% {
    transform: translatey(0px) rotate(0deg);
  }
  100% {
    transform: translatey(20px);
  }
}

Javascript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

document.querySelector(".burger-container").addEventListener("click", () => {
  document.querySelector(".burger-container").classList.toggle("close");
});

Reflection