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

Unsplash ↗

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