revision:
<div class="frame">
<header>
<nav class="menu">
<div class="strokes"></div>
<div class="strokes"></div>
<div class="strokes"></div>
</nav>
</header>
<div class="fullscreenmenu">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<style>
.frame {height: 100vh; width: 96vw; margin: 0;background-color: black; background-image: url(../images/2.jpg); background-position: center center; background-repeat: no-repeat;background-size: cover;}
header{ width: 100%;}
nav.menu{ width: 42px; height: 36px; float: right; margin: 30px 30px 0 0; position: relative; z-index: 999; cursor: pointer; }
nav.menu div.strokes {width: 100%; height: 6px; margin: 0 0 6px 0; background: white; transition: transform 0.3s, opacity 0.1s;}
.hide{opacity: 0;transform: translateX(-42px);}
.animate0{transform: rotate(45deg) translateY(17px);}
.animate2{transform: rotate(-45deg) translateY(-17px);}
.fullscreenmenu{ background-color: rgba(52, 152, 219, 0); top: 10;left: 0; width: 100%; height: 100%; position: absolute; opacity: 0; -webkit-transition: background 0.5s ease-in-out, opacity 0.5s; -moz-transition: background 0.5s ease-in-out, opacity 0.5s; -ms-transition: background 0.5s ease-in-out, opacity 0.5s; -o-transition: background 0.5s ease-in-out, opacity 0.5s; transition: background 0.5s ease-in-out, opacity 0.5s; text-align: center;}
.fullscreenmenu.show{ opacity: 1; background-color: rgba(52, 152, 219, 0.9); -webkit-transition: background 0.5s ease-in-out, visibility 0.5s; -moz-transition: background 0.5s ease-in-out, visibility 0.5s; -ms-transition: background 0.5s ease-in-out, visibility 0.5s; -o-transition: background 0.5s ease-in-out, visibility 0.5s; transition: background 0.5s ease-in-out, visibility 0.5s;}
.fullscreenmenu ul{padding: 10%;}
.fullscreenmenu li a{ visibility: inherit; color: white; font-family: 'Source Sans Pro', sans-serif; font-size: 70px; text-decoration: none; font-weight: 100; text-transform: uppercase; line-height: 150%;}
</style>
<script>
(function () {
"use strict";
var strokes = document.querySelectorAll(".strokes"),
icon = document.querySelector(".menu"),
fullscreenmenu = document.querySelector(".fullscreenmenu");
function transformStart() {
strokes[0].classList.toggle("animate0")
strokes[1].classList.toggle("hide");
strokes[2].classList.toggle("animate2");
fullscreenmenu.classList.toggle("show");
}
icon.addEventListener("click", transformStart);
})();
</script>