<div class="full-menu">
	<nav id="menu" class="menu">
		<ul>
			<li class="home">Home</li>
			<li class="about">About</li>
			<li class="works">Works</li>
			<li class="contact">Contact</li>
		</ul>
	</nav>
</div>

<div class="hamburguer">
		<div class="lines line-top"></div>
		<div class="lines line-mid"></div>
		<div class="lines line-bottom"></div>
</div>

<main class="content">
	<h1 id="teste">Imagine all your content here</h1>
</main>

//Variables for change animation and colors of background, menu overlay, text and icons

$transition-type: ease-in;
$overlay-color: #1e88e5;
$texts-and-icons: #fff;
$body-background: url(https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/96.jpg);

//ZOOM EFFECT ON HOVER MENU ICONS AND LINKS

@keyframes zoom {
	0%, 100% { transform: scale(1);}

	50% { transform: scale(1.1);}
}

// SET BASIC CONTENT - HTML AND BODY 

html, body {
	overflow: hidden;
	line-height: 1.5;
	font-family: 'Montserrat', 'Arial', sans-serif;
	color: $texts-and-icons;
	text-align: center;
}

html, body, .full-menu, .content {
	width: 100%;
	height: 100%;
}

.full-menu, .content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	background-image: $body-background;
	background-size: cover;
	font-size: 3em;
}

// SET BASIC CONTENT AND ANIMATION EFFECT- MENU OVERLAY

.full-menu {
	position: absolute;
	background-color: $overlay-color;
	opacity: 0.5;
	transform: translateX(100%);
	transition: all 400ms $transition-type;

	li {
		font-size: 4em;
		color: $texts-and-icons;
		opacity: 0;
		transform: translateY(2%);
		transition: all 300ms $transition-type;
		cursor: pointer;

		&:after {
			content: "";
			position: absolute;
		    height: 5px;
		    width: 0%;
		    left: 0;
		    bottom: 0;
		    background-color: $texts-and-icons;
		    transition: width 200ms $transition-type;
		}

		&:hover:after { width: 100%;}
	}

	ul { list-style: none;}

	&.active {
		transform: translateX(0%);
		opacity: 1;
		z-index: 0;

		.home { transition-delay: .3s;}

		.about { transition-delay: .4s;}

		.works { transition-delay: .5s;}

		.contact { transition-delay: .6s;}

		li {
			opacity: 1;
			transform: translateX(0%);

			&:hover {
				animation: zoom 200ms $transition-type;
			}
		}
	}
}

// SET BASIC CONTENT AND ANIMATION EFFECT- HAMBURGUER MENU

.hamburguer {
	position: absolute;
	width: 2em;
	height: 2em;
	margin: 3em;
	z-index: 1;
	cursor: pointer;

	&:hover {
		animation: zoom 300ms $transition-type;
	}
}

.lines {
	background-color: $texts-and-icons;
	width: 100%;
	height: 5px;
	margin: 5px 0;
	transition: all 450ms $transition-type;
}

// SET ANIMATION EFFECT - HAMBURGUER MENU CLOSED

.close-hamburguer {
	.lines { cursor: pointer;}

	.line-top { transform: translateY(200%) rotate(45deg);}

	.line-mid { opacity: 0;}

	.line-bottom { transform: translateY(-200%) rotate(135deg);}
}
View Compiled
//Using Vanilla JS
document.querySelector(".hamburguer").addEventListener("click", function(){
	document.querySelector(".full-menu").classList.toggle("active");
	document.querySelector(".hamburguer").classList.toggle("close-hamburguer");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.