10+ JavaScript Fullscreen Menu Examples

This post contains a total of 10+ Hand-Picked JavaScript Fullscreen Menu Examples with Source Code. All these Fullscreen menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Fullscreen Menu Examples

1. By Marcus Hall

Made by Marcus Hall. Fullscreen Menu using Flexbox Method. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,100);
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: 1;
  text-align: center;
  font-family: "Roboto", sans-serif;
  color: black;
}
.content h1 {
  font-size: 60px;
  margin-bottom: 15px;
  font-weight: 300;
}
.content h2 {
  font-size: 42px;
  font-weight: 100;
}

.menu-container {
  z-index: 2;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-100%);
  transition: transform 0.5s;
  transition-delay: 0.5s;
  visibility: hidden;
}
.menu ul li {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 45px;
  color: white;
  min-height: 45px;
  padding: 15px;
  text-align: center;
}
.menu ul li a {
  cursor: pointer;
}

.menu-sliders {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: flex 0.45s;
}
.menu-sliders:nth-child(2) {
  flex: 1 0 100%;
  background: transparent;
}
.menu-sliders:nth-child(odd) {
  background: #005db7;
}

.plus-btn-pos {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}

.plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: white;
  position: relative;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.plus-btn div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 3px;
  background: #0259a5;
  transition: transform 0.3s;
  transition-delay: 0.5s;
}
.plus-btn .r1 {
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
.plus-btn .r2 {
  transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
.plus-btn:hover {
  background: #0259a5;
}
.plus-btn:hover div {
  background: white;
}
.plus-btn:active {
  box-shadow: none;
}

body.menu-open .menu-sliders:nth-child(2) {
  flex: 0 0 0%;
}
body.menu-open .menu {
  transform: translateY(0%);
  visibility: visible;
  pointer-events: all;
}
body.menu-open .plus-btn .r1 {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
body.menu-open .plus-btn .r2 {
  transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
</style>
</head>
<body>
  <div class="plus-btn-pos">
  <div class="plus-btn">
    <div class="r1"></div>
    <div class="r2"></div>
  </div>
</div>
<div class="content">
  <div>
    <h1>
      Fullscreen Menu
    </h1>
    <h2>
      Flexbox Style
    </h2>
  </div>
</div>
<div class="menu-container">
  <div class="menu-sliders"></div>
  <div class="menu-sliders"></div>
  <div class="menu-sliders"></div>
  <div class="menu">
    <ul>
      <li>
        <a>Home</a>
      </li>
      <li>
        <a>About      </a>
      </li>
      <li>
        <a>Work</a>
      </li>
      <li>
        <a>Contact</a>
      </li>
    </ul>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.plus-btn').click(function () {
  $('body').toggleClass('menu-open');
});
    </script>
</body>
</html>

2. By Anton Petrov

Made by Anton Petrov. Fullscreen JavaScript Menu with Background Color Change Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  transition: all 300ms ease-out;
}
body.light {
  background-color: #EEE;
}
body.red {
  background-color: #FF7B4F;
}
body.blue {
  background-color: #51A8FF;
}
body.orange {
  background-color: #FF9B6A;
}
body.green {
  background-color: #8DC783;
}
body.pink {
  background-color: #FF91C8;
}
.red ul.menu li,
.blue ul.menu li,
.orange ul.menu li,
.green ul.menu li,
.pink ul.menu li {
  opacity: 0.2;
  color: white !important;
}
.red ul.menu li:hover,
.blue ul.menu li:hover,
.orange ul.menu li:hover,
.green ul.menu li:hover,
.pink ul.menu li:hover {
  color: white !important;
  opacity: 1;
}
body ul.menu {
  position: absolute;
  height: 250px;
  top: 50%;
  margin-top: -125px;
  width: auto;
  margin-left: 50px;
}
body ul.menu li {
  list-style-type: none;
  line-height: 50px;
  font-family: 'Raleway', sans-serif;
  font-size: 50px;
}
body ul.menu li:nth-child(1) {
  color: #FF7B4F;
}
body ul.menu li:nth-child(2) {
  color: #51A8FF;
}
body ul.menu li:nth-child(3) {
  color: #FF9B6A;
}
body ul.menu li:nth-child(4) {
  color: #8DC783;
}
body ul.menu li:nth-child(5) {
  color: #FF91C8;
}
body ul.menu li:hover {
  cursor: pointer;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

<ul class="menu">
	<li><span>Welcome</span></li>
	<li><span>About Us</span></li>
	<li><span>What we do</span></li>
	<li><span>Our portfolio</span></li>
	<li><span>Contact us</span></li>
</ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  $('body').addClass('light');

  $('ul.menu li:nth-child(1)').mouseover(function () {
    $('body').addClass('red').removeClass('light');
  });

  $('ul.menu li:nth-child(1)').mouseout(function () {
    $('body').addClass('light').removeClass('red');
  });

  $('ul.menu li:nth-child(2)').mouseover(function () {
    $('body').addClass('blue').removeClass('light');
  });

  $('ul.menu li:nth-child(2)').mouseout(function () {
    $('body').addClass('light').removeClass('blue');
  });

  $('ul.menu li:nth-child(3)').mouseover(function () {
    $('body').addClass('orange').removeClass('light');
  });

  $('ul.menu li:nth-child(3)').mouseout(function () {
    $('body').addClass('light').removeClass('orange');
  });

  $('ul.menu li:nth-child(4)').mouseover(function () {
    $('body').addClass('green').removeClass('light');
  });

  $('ul.menu li:nth-child(4)').mouseout(function () {
    $('body').addClass('light').removeClass('green');
  });

  $('ul.menu li:nth-child(5)').mouseover(function () {
    $('body').addClass('pink').removeClass('light');
  });

  $('ul.menu li:nth-child(5)').mouseout(function () {
    $('body').addClass('light').removeClass('pink');
  });

});
    </script>
</body>
</html>

3. By Camden Foucht

Made by Camden Foucht. Fullscreen menu with slide down animation and hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700,800,900" rel="stylesheet">
<style>
* {
  margin: 0;
  padding: 0;
  font-family: "Work Sans", sans-serif;
}

h1 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  color: #fff;
  font-weight: 700;
  font-size: 48px;
  z-index: 10;
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 880px) {
  h1 {
    font-size: 32px;
  }
}

.container {
  display: flex;
  height: 100vh;
  z-index: 5;
}
.container__open .menu {
  display: block;
}

.container__open .toggle__span:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}
.container__open .toggle__span:nth-child(2) {
  background-color: transparent;
}
.container__open .toggle__span:nth-child(3) {
  top: 18px;
  transform: rotate(-45deg);
}

.container__open .flex-box:nth-child(2) {
  flex: 0 0 0;
}

.flex-box {
  background-color: #004d40;
  flex: 0 1 50%;
  transition: 0.5s all ease-in-out;
  position: relative;
  z-index: 15;
}

.flex-box:nth-child(2) {
  flex: 1 0 100%;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  z-index: 1;
}

.container:hover.flex-box:nth-child(2) {
  flex: 0 0 0;
}

.menu {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0%;
  height: 100vh;
  color: #fff;
  transform: translateY(-100%);
  background-color: transparent;
  animation: 0.4s slideDown 0.25s forwards;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}
.menu__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}
@media only screen and (max-width: 880px) {
  .menu__list {
    flex-direction: column;
  }
}
.menu__item {
  font-weight: 700;
  font-size: 44px;
  padding: 1rem;
  margin: 0 1rem;
  text-align: center;
  background: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 240%;
  transition: 0.3s all ease-in-out;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
}
.menu__item:hover {
  background-position: 99%;
  color: #004d40;
}
@media only screen and (max-width: 1250px) {
  .menu__item {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1000px) {
  .menu__item {
    font-size: 28px;
  }
}

.hover-box {
  background-color: #fff;
  color: green;
  display: none;
  animation: 0.6s fadeIn ease-in-out;
  position: absolute;
  color: #004d40;
  top: 100%;
  width: 100%;
  left: 0;
  border-top: 4px solid #004d40;
  backface-visibility: none;
}
.hover-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.hover-box__item {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  padding: 6px 12px;
  border-bottom: 2px solid #004d40;
  transition: 0.2s background;
  box-sizing: border-box;
  backface-visibility: none;
}
.hover-box__item:hover {
  background-color: #a5d6a7;
}
@media only screen and (max-width: 880px) {
  .hover-box {
    display: block;
    position: relative;
    width: auto;
    border-top: 2px solid #004d40;
  }
  .hover-box__list {
    flex-direction: row;
  }
}

.toggle {
  cursor: pointer;
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 10000;
  width: 40px;
  height: 40px;
}
.toggle__span {
  height: 3px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  transition: 0.4s;
}
.toggle__span:nth-child(1) {
  top: 10px;
}
.toggle__span:nth-child(2) {
  top: 19px;
}
.toggle__span:nth-child(3) {
  top: 28px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
</head>
<body>
  <h1>

  Flex Menu</h1>
<div class="container">
  <div class="flex-box"></div>
  <div class="flex-box"></div>
  <div class="flex-box"></div>

  <div class="menu">
    <ul class="menu__list">
      <li class="menu__item">Home</li>
      <li class="menu__item">About</li>
      <li class="menu__item dropdown-holder dropdown-holder1">
        Widgets
        <div class="hover-box">
          <ul class="hover-box__list">
            <li class="hover-box__item">Big Widget</li>
            <li class="hover-box__item">Bigger Widgets</li>
            <li class="hover-box__item">Huge Widget</li>
          </ul>
        </div>

      </li>
      <li class="menu__item dropdown-holder">Kabobs
        <div class="hover-box">
          <ul class="hover-box__list">
            <li class="hover-box__item">Shiskabobs</li>
            <li class="hover-box__item">BBQ kabobs</li>
            <li class="hover-box__item">Summer Kabobs</li>
          </ul>
        </div>

      </li>
      <li class="menu__item">Contact</li>

    </ul>
  </div>

  <div class="toggle">
    <span class="toggle__span"></span>
    <span class="toggle__span"></span>
    <span class="toggle__span"></span>
  </div>

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
      <script >
if ($(window).width() > 739) {
  $(".dropdown-holder").on("mouseenter", function (e) {
    $(".hover-box", this).slideDown("fast");
    $(".dropdown-holder").on("mouseleave", function (e) {
      $(".hover-box", this).slideUp("fast");
    });
  });
}

document.querySelector(".toggle").addEventListener("click", function () {
  document.querySelector(".container").classList.toggle("container__open");
});
    </script>
</body>
</html>

4. By Demian

Made by Demian. JavaScript Hamburger Fullscreen menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:700,500,900,400,300,100);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
/*Variable defs*/
/*Main*/
html, body {
  height: 100%;
  font-family: "Roboto", sans-serif;
}

body {
  font-size: 16px;
  height: 100%;
  /*background:url(http://www.runroomclients.com/runroom_new/assets/images/header-background.jpg) no-repeat center;
  background-size:cover;*/
}

.bg {
  height: 100%;
}

.wrapper {
  height: 100%;
  text-align: center;
}
.wrapper h1 {
  position: relative;
  top: 49%;
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #cacaca;
  padding: 1rem 0.25rem;
  border-top: 2px solid #cacaca;
  border-bottom: 2px solid #cacaca;
  display: inline-block;
  font-size: 3rem;
  font-size: 5.5vw;
  font-weight: 100;
}

/*Elements*/
.hamburger {
  position: fixed;
  z-index: 101;
  display: block;
  top: 1rem;
  right: 1rem;
  height: 4rem;
  width: 4rem;
  border: 2px solid #cacaca;
}

.menu {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

.overlay {
  position: fixed;
  z-index: 100;
  background: #ff183b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  overflow: hidden;
}
.overlay.visible {
  opacity: 0.8;
  visibility: visible;
  -webkit-animation: perspective 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
          animation: perspective 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
}
.overlay.visible li {
  -webkit-animation: fadeMoveFromTop 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
          animation: fadeMoveFromTop 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  transform-origin: bottom;
  margin: 0 8px;
  margin: 0 1vw;
}
.overlay.visible li:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.overlay.visible li:nth-of-type(2) a {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.overlay.visible li:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.overlay.visible li:nth-of-type(3) a {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.overlay.visible li:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.overlay.visible li:nth-of-type(4) a {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.overlay.visible li:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.overlay.visible li:nth-of-type(5) a {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.overlay.visible li:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.overlay.visible li:nth-of-type(6) a {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.overlay.visible li a {
  -webkit-animation: perspectiveA 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
          animation: perspectiveA 0.5s cubic-bezier(0.58, 0.27, 0.81, 0.57) forwards;
  transform-origin: top;
}
@-webkit-keyframes fadeMoveFromTop {
  0% {
    opacity: 0;
    bottom: 20px;
  }
  75% {
    opacity: 1;
    bottom: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes fadeMoveFromTop {
  0% {
    opacity: 0;
    bottom: 20px;
  }
  75% {
    opacity: 1;
    bottom: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes perspective {
  0% {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
}
@keyframes perspective {
  0% {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
}
@-webkit-keyframes perspectiveA {
  0% {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
@keyframes perspectiveA {
  0% {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
.overlay nav {
  position: relative;
  height: 100%;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  margin: 0 auto;
  position: relative;
  height: 100%;
  text-align: center;
  padding: 0;
}
.overlay ul li {
  display: inline-block;
  position: relative;
  opacity: 0;
  margin-right: -4px;
}
.overlay ul li a {
  transform: rotate3d(1, 0, 0, 90deg);
  position: relative;
  display: block;
  font-weight: 100;
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;
  font-size: 4vw;
  overflow: hidden;
}
</style>
</head>
<body>
  <section class="bg">
	<a class="hamburger" href="#"></a>
	<div class="overlay">
		<nav class="overlay-menu">
			<div class="menu">
				<ul>
					<li><a href="#">Clients</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</nav>
	</div>
	<div class="wrapper">
		<h1>I am a <strong>heading</strong></h1>
	</div>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var h = $('.hamburger'),
o = $('.overlay');

h.on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('active');
  o.toggleClass('visible');
});
    </script>
</body>
</html>

5. By AdityaParkhe

Made by AdityaParkhe. Fullscreen menu with cool animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

    body{
      background-color: #eee;
    }
    h1{
      font-size: 9em
    }
    /*********** Menu bar**************/

    .overlay {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
      transition: 0.5s;
    }

    .show {
      width: 25%;
    }

    .overlay1 {
      left: 0;
      background-color: #C62828;
    }

    .overlay2 {
      right: 0;
      background-color: #B71C1C;
    }

    .overlay3 {
      left: 25%;
      background-color: #D32F2F;
    }

    .overlay4 {
      right: 25%;
      background-color: #E53935
    }

    #overlaymenu {
      position: absolute;
      z-index: 10;
      color: #fff;
    }

    .overlay-content {
      position: fixed;
      top: 15%;
      width: 100%;
      text-align: left;
    }

    ul{
      list-style-type: none;
    }

    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 4rem;
      color: #fff;
      display: none;
      transition: 0.3s;
      font-family: 'Archivo Black', sans-serif;
    }

    .overlay a:hover,
    .overlay a:focus {
      color: #ddd;
    }

    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 0;
      font-size: 60px;
      z-index: 100
    }

    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }

    .menuIcon {
      display: inline-block;
      cursor: pointer;
      height: 50px;
      width: 50px;
      z-index: 99;
      right: 2%;
      position: fixed;
      top: 2%
    }

    .bar1,
    .bar2,
    .bar3 {
      width: 40px;
      height: 5px;
      background-color: #E53935;
      margin: 5px 0;
      transition: 0.5s;
    }

    .bar2 {
      width: 30px;
      margin: auto;
    }

    .show .bar1 {
      -webkit-transform: rotate(-45deg) translate(0px, 10px);
      transform: rotate(-45deg) translate(0px, 10px);
      background-color: #fff
    }

    .show .bar2 {
      -webkit-transform: rotate(45deg) translate(0px, 0px);
      transform: rotate(45deg) translate(0px, 0px);
      background-color: #fff
    }

    .show .bar3 {
      display: none
    }
</style>
</head>
<body>
  <div class="right menuIcon" onclick="showFullScreenMenu(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>

  <div class="row">

    <div class="overlay overlay1"></div>

    <div class="overlay overlay2"></div>

    <div class="overlay overlay3"></div>

    <div class="overlay overlay4"></div>

    <div id="overlaymenu" class="overlay">
      <div class="overlay-content">
        <ul class="col-md-3 offset-3">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

  </div>
<div class="container">
  <br><br>
  <h1><b>Namaste!</b></h1>
  <p>Text</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
      <script>
function showFullScreenMenu(x) {
  x.classList.toggle("show");

  $('.overlay1').toggleClass('show', 200);

  setTimeout(function () {
    $('.overlay2').toggleClass('show', 200);
  }, 200);
  setTimeout(function () {
    $('.overlay3').toggleClass('show', 200);
  }, 400);
  setTimeout(function () {
    $('.overlay4').toggleClass('show', 200);
  }, 600);
  setTimeout(function () {
    $("#overlaymenu a").fadeToggle(150);
  }, 450);
}
    </script>
</body>
</html>

6. By JarrodNotJared

Made by JarrodNotJared. Fullscreen JavaScript menu with side to side slide animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<style>
body {
  margin: 0px;
  padding: 0px;
  font-family: "Muli", sans-serif;
  color: #fff;
}

.navbar {
  background: #ffffff;
  height: 65px;
  box-shadow: 0px 0px 10px #b5a5c7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 80px;
}
.navbar .logo {
  float: left;
  height: 25px;
  width: auto;
}
.navbar .bars {
  height: 35px;
  width: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.navbar .bars .bar-1 {
  height: 3px;
  width: 40px;
  border-radius: 2px;
  background: #eccd1e;
  position: absolute;
  top: 5.0833333333px;
  right: 0;
}
.navbar .bars .bar-2 {
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: #eccd1e;
  position: absolute;
  top: 15.25px;
  right: 0px;
}
.navbar .bars .bar-3 {
  height: 3px;
  width: 40px;
  border-radius: 2px;
  background: #eccd1e;
  position: absolute;
  top: 25.4166666667px;
  right: 0;
}

nav {
  position: fixed;
  left: 105%;
  height: 100%;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
nav div.left {
  transition: 0.5s linear;
  background: #ffffff;
  width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav div.right {
  transition: 0.5s linear;
  background: #8967F1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 15px 3px #9781b9;
}
nav div.right div {
  font-size: 30px;
  list-style: none;
}

.menu-slide-across-full {
  animation: menu-slide-across-full 0.5s forwards;
}

@keyframes menu-slide-across-full {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
.menu-slide-half-back {
  animation: menu-slide-half-back 1s 0.7s forwards;
}

@keyframes menu-slide-half-back {
  0% {
    width: 0;
  }
  40% {
    width: 110%;
  }
  70% {
    width: 90%;
  }
  90% {
    width: 103%;
  }
  100% {
    width: 100%;
  }
}
.menu-slide-squeeze-right {
  animation: menu-slide-squeeze-right 1s forwards;
}

@keyframes menu-slide-squeeze-right {
  0% {
    width: 100%;
  }
  25% {
    width: 70%;
  }
  50% {
    width: 250%;
  }
  100% {
    width: 0%;
  }
}
.closing-menu-slide-left {
  animation: closing-menu-slide-init 0s forwards, closing-menu-slide-left 1s 0.55s ease-in forwards;
}

@keyframes closing-menu-slide-init {
  0%, 100% {
    left: 0%;
  }
}
@keyframes closing-menu-slide-left {
  0% {
    left: 0%;
  }
  40% {
    left: 0%;
  }
  100% {
    left: -105%;
  }
}
.rotate-menu-bars {
  animation: menu-bars-rotate 0.25s forwards;
}

@keyframes menu-bars-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(45deg) scale(0.8);
  }
}
.top-line-animation {
  animation: top-line-shrink 0.4s 0.25s forwards, top-line-slide-in 0.25s 0.65s forwards, top-line-bounce-out 0.75s 1.05s forwards;
}

@keyframes top-line-shrink {
  0% {
    width: 80%;
  }
  100% {
    width: 3px;
  }
}
@keyframes top-line-slide-in {
  0% {
    top: 5.0833333333px;
    width: 3px;
  }
  99% {
    top: 15.25px;
    width: 3px;
  }
  100% {
    top: 15.25px;
    width: 100%;
  }
}
@keyframes top-line-bounce-out {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(100deg);
  }
  50% {
    transform: rotate(85deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
.bottom-line-animation {
  animation: bottom-line-slide-left 0.25s, bottom-line-shrink 0.4s 0.25s forwards, bottom-line-slide-in 0.25s 0.65s forwards;
}

@keyframes bottom-line-slide-left {
  0% {
    left: 0px;
  }
  100% {
    left: 0px;
  }
}
@keyframes bottom-line-shrink {
  0% {
    left: 0px;
    width: 80%;
  }
  100% {
    left: 0px;
    width: 3px;
  }
}
@keyframes bottom-line-slide-in {
  0% {
    top: 25.4166666667px;
  }
  100% {
    top: 15.25px;
  }
}
.rotate-menu-bars-reverse {
  animation: menu-bars-rotate-pause 1.4s, menu-bars-rotate-rev 0.25s 1.4s forwards;
}

@keyframes menu-bars-rotate-pause {
  0%, 100% {
    transform: rotate(45deg) scale(0.8);
  }
}
@keyframes menu-bars-rotate-rev {
  0% {
    transform: rotate(45deg) scale(0.8);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.top-line-animation-reverse {
  animation: top-line-bounce-out-init 0s forwards, top-line-bounce-out-reverse 0.75s forwards, top-line-slide-in-reverse 0.25s 0.75s forwards, top-line-shrink-reverse 0.4s 1s forwards;
}

@keyframes top-line-bounce-out-init {
  0%, 100% {
    top: 15.25px;
    transform: rotate(90deg) scale(0.8);
    width: 100%;
  }
}
@keyframes top-line-bounce-out-reverse {
  0% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(85deg);
  }
  75% {
    transform: rotate(100deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes top-line-slide-in-reverse {
  0% {
    top: 15.25px;
    width: 3px;
  }
  100% {
    top: 5.0833333333px;
    width: 3px;
  }
}
@keyframes top-line-shrink-reverse {
  0% {
    width: 3px;
  }
  100% {
    width: 80%;
  }
}
.bottom-line-animation-reverse {
  animation: bottom-line-bounce-out-init 0.75s forwards, bottom-line-slide-in-reverse 0.25s 0.75s forwards, bottom-line-shrink-reverse 0.4s 1s forwards, bottom-line-slide-left-reverse 0.15s 1.35s forwards;
}

@keyframes bottom-line-bounce-out-init {
  0%, 100% {
    top: 15.25px;
    width: 3px;
    left: 0px;
  }
}
@keyframes bottom-line-slide-in-reverse {
  0% {
    top: 15.25px;
    width: 3px;
  }
  100% {
    top: 25.4166666667px;
    width: 3px;
  }
}
@keyframes bottom-line-shrink-reverse {
  0% {
    width: 3px;
  }
  100% {
    width: 80%;
  }
}
@keyframes bottom-line-slide-left-reverse {
  0% {
    left: 0;
  }
  100% {
    left: 10px;
  }
}
</style>
</head>
<body>
  <div class="navbar">
        <div class="logo">
<!--             <img src="./images/logo.svg" height="25px" width="auto" alt="logo"> -->
        </div>
        <div class="bars" id="nav-toggle">
            <div class="bar-1"></div>
            <div class="bar-2"></div>
            <div class="bar-3"></div>
        </div>
    </div>
    <nav id="nav-menu-container">
        <div class="left"></div>
        <div class="right">
					<div>
						<li> Menu Item 1</li>
						<li> Menu Item 2</li>
						<li> Menu Item 3</li>
					</div>
				</div>
    </nav>
      <script>
var menuClosed = true;
document.querySelector("#nav-toggle").addEventListener("click", function (e) {
  if (menuClosed == true) {
    handleMenuOpen();
  } else {
    handleMenuClose();
  }
  menuClosed = !menuClosed;
});

function handleMenuOpen() {
  //
  // forwards open fullscreen menu
  //
  document.
  querySelector("#nav-menu-container .left").
  classList.remove("menu-slide-squeeze-right");
  document.
  querySelector("#nav-menu-container").
  classList.remove("closing-menu-slide-left");
  document.
  querySelector("#nav-menu-container").
  classList.add("menu-slide-across-full");
  document.
  querySelector("#nav-menu-container .left").
  classList.add("menu-slide-half-back");
  //
  // remove reverse icon animations
  //
  document.
  querySelector("#nav-toggle").
  classList.remove("rotate-menu-bars-reverse");
  document.
  querySelector("#nav-toggle .bar-1").
  classList.remove("top-line-animation-reverse");
  document.
  querySelector("#nav-toggle .bar-3").
  classList.remove("bottom-line-animation-reverse");
  //
  // add forwards icon animations
  //
  document.querySelector("#nav-toggle").classList.add("rotate-menu-bars");
  document.
  querySelector("#nav-toggle .bar-1").
  classList.add("top-line-animation");
  document.
  querySelector("#nav-toggle .bar-3").
  classList.add("bottom-line-animation");
}

function handleMenuClose() {
  document.
  querySelector("#nav-menu-container").
  classList.add("closing-menu-slide-left");
  document.
  querySelector("#nav-menu-container .left").
  classList.add("menu-slide-squeeze-right");
  setTimeout(() => {
    document.
    querySelector("#nav-menu-container .left").
    classList.remove("menu-slide-half-back");
  }, 1000);

  //
  // add reverse icon animations
  //
  document.
  querySelector("#nav-toggle").
  classList.add("rotate-menu-bars-reverse");
  document.
  querySelector("#nav-toggle .bar-1").
  classList.add("top-line-animation-reverse");
  document.
  querySelector("#nav-toggle .bar-3").
  classList.add("bottom-line-animation-reverse");
  //
  // remove forwards icon animations
  //
  document.querySelector("#nav-toggle").classList.remove("rotate-menu-bars");
  document.
  querySelector("#nav-toggle .bar-1").
  classList.remove("top-line-animation");
  document.
  querySelector("#nav-toggle .bar-3").
  classList.remove("bottom-line-animation");
}
    </script>
</body>
</html>

7. By Evan Jenkins

Made by Evan Jenkins. Fullscreen menu with animated item entrance. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html {
  font-family: Lato, sans-serif;
}

body {
  font-size: 100%;
}

@media all and (max-width: 768px) {
  body {
    font-size: 62.5%;
  }
}
.site-navbar {
  height: 75px;
  line-height: 75px;
  background-color: #fff;
  border-bottom: 2px solid #bbb;
  padding: 0 2em;
}

.menu-switch {
  color: #000;
  float: right;
  height: 75px;
  width: 75px;
  text-align: center;
  line-height: 75px;
  overflow: hidden;
  transition: 0.2s all;
}
.menu-switch:hover .bar-icon > * {
  background-color: rgba(0, 0, 0, 0.9);
}

.bar-icon {
  display: inline-block;
  position: relative;
  height: 4px;
}
.bar-icon > * {
  height: 4px;
  width: 25px;
  background-color: #000;
  position: absolute;
  top: 0;
  transition: transform 0.3s ease-out;
}
.bar-icon-2 {
  transform: translate(-50%, -50%) translate(0, -8px);
}
.bar-icon-1 {
  transform: translate(-50%, -50%) translate(0, 8px);
}
.bar-icon-3 {
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out;
}

.menu-open .bar-icon-3 {
  transform: translate(150%, -50%);
}
.menu-open .bar-icon-2 {
  transform: rotate(-45deg) translate(-8px, -9px);
}
.menu-open .bar-icon-1 {
  transform: rotate(45deg) translate(-9px, 8px);
}

.menu {
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  transform: rotateX(90deg);
  transition: transform 0.2s;
  overflow: hidden;
  z-index: 9998;
  willchange: transform;
}
.menu ul {
  padding: 0;
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 320px;
  text-align: center;
  z-index: 9999;
}
.menu li {
  color: rgba(255, 173, 173, 0.9);
  font-size: 1.5em;
  height: 2.5em;
  line-height: 2.5em;
  position: relative;
}
.menu-open .menu {
  transition: transform 0.2s;
  transform: rotateX(0);
}
.menu-open .menu li:nth-child(1) {
  -webkit-animation: menuAnimation 0.1s ease;
          animation: menuAnimation 0.1s ease;
}
.menu-open .menu li:nth-child(2) {
  -webkit-animation: menuAnimation 0.2s ease;
          animation: menuAnimation 0.2s ease;
}
.menu-open .menu li:nth-child(3) {
  -webkit-animation: menuAnimation 0.3s ease;
          animation: menuAnimation 0.3s ease;
}
.menu-open .menu li:nth-child(4) {
  -webkit-animation: menuAnimation 0.4s ease;
          animation: menuAnimation 0.4s ease;
}
.menu-open .menu li:hover {
  color: #fff;
  cursor: pointer;
}

.content-wrap {
  transition: transform 0.2s;
}
.menu-open .content-wrap {
  transform: scale(0.9);
}

.hero {
  position: relative;
  height: 100vh;
  background-image: linear-gradient(-45deg, #e05c5c, #e0845c);
}
.hero .hero__headline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 250px;
  text-align: center;
}
.hero .hero__headline h1 {
  font-size: 3.5em;
  font-weight: 300;
}

@-webkit-keyframes menuAnimation {
  0% {
    margin-right: -500%;
  }
  90% {
    margin-right: 5%;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes menuAnimation {
  0% {
    margin-right: -500%;
  }
  90% {
    margin-right: 5%;
  }
  100% {
    margin-top: 0;
  }
}
</style>
</head>
<body>
  <div ng-app="testApp" ng-controller="testCtrl as test" ng-class="{'menu-open': test.menuOpen}">
  <header class="site-navbar">
    <a href="#" ng-click='test.menuOpen =! test.menuOpen' class="menu-switch">
      <i class="bar-icon">
        <div class="bar-icon-1"></div>
        <div class="bar-icon-2"></div>
        <div class="bar-icon-3"></div>
      </i>
    </a>
  </header>
  <nav class="menu">
    <ul class="list-unstyled">
      <li>Portfolio</li>
      <li>Contact</li>
      <li>Careers</li>
      <li>Complaints</li>
    </ul>
  </nav>
  <section class="content-wrap">
    <div class="hero">
      <div class="hero__headline">
          <h1>Fullscreen Animated Menu</h1>
      </div>
    </div>
  </section>

</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
      <script>
angular.module('testApp', []).
controller('testCtrl', function () {
  var vm = this;
  vm.menuOpen = false;
});
    </script>
</body>
</html>

8. By Rune Sejer Hoffmann

Made by Rune Sejer Hoffmann. Fullscreen menu with Pop Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:900);
body {
  background-color: #eaeaea;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  background-color: #222;
  text-align: center;
  line-height: 25vh;
  cursor: pointer;
  font-family: "Playfair Display", serif;
  color: #fbbc21;
  font-size: 56px;
  transition: width 0.3s ease 0.6s, height 0.3s ease 0.6s;
}
.menu.active {
  width: 100vw;
  height: 100vh;
}
.menu.active li {
  opacity: 1;
}
.menu.active li:nth-child(1) {
  transition: opacity 0.3s ease 0.95s;
}
.menu.active li {
  opacity: 1;
}
.menu.active li:nth-child(2) {
  transition: opacity 0.3s ease 1.1s;
}
.menu.active li {
  opacity: 1;
}
.menu.active li:nth-child(3) {
  transition: opacity 0.3s ease 1.25s;
}
.menu.active:after, .menu.active:before {
  top: 50%;
  width: 3px;
  border-radius: 3px;
  opacity: 0;
}
.menu:after, .menu:before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  background-color: #fbbc21;
  pointer-events: none;
  transition: top 0.2s ease, width 0.2s ease 0.3s, border-radius 0.2s ease 0.2s, opacity 0.1s ease 0.6s;
}
.menu:before {
  top: 60%;
}
.menu li {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu li:hover {
  color: #ffe9b4;
}
</style>
</head>
<body>
  <div class='menu'>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
$('.menu').on('click', function () {
  $(this).toggleClass('active');
});
    </script>
</body>
</html>

9. By Abdul Sadık Yalçın

Made by Abdul Sadık Yalçın. Simple JavaScript Fullscreen menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

body.disable-scroll {
  height: 100%;
  overflow: hidden;
}

.container {
  width: 70%;
  max-width: 960px;
  margin: 80px auto;
}

h2 {
  margin: 2.5%;
  color: #353535;
  font-size: 1.5em;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.col-6 {
  width: 45%;
  float: left;
  margin: 0 2.5% 2.5%;
}

@media only screen and (max-width: 45em){
  .col-6 {
    width: 100%;
  }
}

.col-6::after {
  display: table;
  content: '';
  clear: both;
}

p {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
}

.page-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  background-color: #f9f9f9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  transition: all 0.5s ease-in-out;
}

.page-header.sidebar-open {
  background-color: rgba(0, 0, 0, 0.95);
}

.page-header * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.page-header a {
  color: #205b7d;
  font-size: 1.5em;
  transition: all 0.3s ease-in-out;
}

.page-header a:focus {
  outline: none;
}

.page-header a i {
  color: #205b7d;
  transition: all 0.3s ease-in-out;
}

.page-header a:hover {
  color: #2176a7;
  transition: all 0.3s ease-in-out;
}

.page-header a:hover i {
  color: #2176a7;
  transition: all 0.3s ease-in-out;
}

.page-header.scrolled {
  background-color: #205b7d;
  transition: all 0.3s ease-in-out;
}

.page-header.scrolled.sidebar-open {
  background-color: rgba(0, 0, 0, 0.95);
}

.page-header.scrolled.sidebar-open a {
  color: #205b7d !important;
}

.page-header.scrolled.sidebar-open a i {
  color: #205b7d !important;
}

.page-header.scrolled.sidebar-open a .line {
  background: #2176a7 !important;
}

.page-header.scrolled.sidebar-open a:hover {
  color: #2176a7 !important;
}

.page-header.scrolled.sidebar-open a:hover i {
  color: #2176a7 !important;
}

.page-header.scrolled.sidebar-open h1 {
  color: #205b7d !important;
}

.page-header.scrolled a {
  color: #c9c9c9;
}

.page-header.scrolled a i {
  color: #c9c9c9;
}

.page-header.scrolled a:hover {
  color: #ffffff;
}

.page-header.scrolled a:hover i {
  color: #ffffff;
}

.page-header.scrolled .page-header-wrapper .page-title h1 {
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line {
  background: #c9c9c9;
}

.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line {
  background: #ffffff;
}

.page-header.scrolled .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line {
  background: #ffffff;
}

.page-header.scrolled .page-header-wrapper .cog-wrapper a.active i {
  color: #ffffff;
}

.page-header .page-header-wrapper {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  line-height: 60px;
}

.page-header .page-header-wrapper .page-title {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30%;
  margin-left: -15%;
}

@media only screen and (max-width: 540px) {
  .page-header .page-header-wrapper .page-title {
    display: none;
  }
}

.page-header .page-header-wrapper .page-title h1 {
  text-align: center;
  color: #205b7d;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 60px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
}

.page-header .page-header-wrapper .hamburger-wrapper {
  float: left;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu {
  width: 25px;
  position: relative;
  display: block;
  line-height: 60px;
  margin: 0 auto;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.hidden {
  display: none;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line {
  display: block;
  margin: 0 auto;
  background: #205b7d;
  width: 25px;
  height: 3px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-1 {
  margin-top: 21px;
  margin-top: calc((60px - 17px) / 2);
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-2 {
  margin-top: 4px;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu .line.line-3 {
  margin-top: 4px;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line {
  background: #2176a7;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line-1 {
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu:hover .line-3 {
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line {
  background: #2176a7;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-1 {
  transform: translateY(7px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
  -moz-transform: translateY(7px) translateX(0) rotate(45deg);
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-2 {
  opacity: 0;
}

.page-header .page-header-wrapper .hamburger-wrapper a.hamburger-menu.active .line-3 {
  transform: translateY(-7px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-7px) translateX(0) rotate(-45deg);
}

.page-header .page-header-wrapper .sync-wrapper {
  float: left;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .sync-wrapper a.sync-button i {
  transform-origin: center;
}

.page-header .page-header-wrapper .search-wrapper {
  float: left;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .network-wrapper {
  float: right;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .network-wrapper i {
  color: #3ccd41;
}

.page-header .page-header-wrapper .network-wrapper.offline i {
  color: #fa0b2b;
}

.page-header .page-header-wrapper .inbox-wrapper {
  float: right;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .inbox-wrapper a {
  display: block;
  position: relative;
}

.page-header .page-header-wrapper .inbox-wrapper a span {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  font-size: 0.35em;
  line-height: 20px;
  background: #df122d;
  color: #ffffff;
  font-weight: bold;
  border-radius: 50%;
}

.page-header .page-header-wrapper .inbox-wrapper a span.unread-messages {
  display: block;
}

.page-header .page-header-wrapper .cog-wrapper {
  float: right;
  height: 60px;
  width: 60px;
  text-align: center;
}

.page-header .page-header-wrapper .cog-wrapper a i {
  transform-origin: center;
}

.page-header .page-header-wrapper .cog-wrapper a.active i {
  transform: translate(0, 0) rotate(25deg);
  color: #2176a7;
}

.page-header .page-header-wrapper .settings-menu {
  position: fixed;
  top: 75px;
  width: 10%;
  max-width: 250px;
  min-width: 200px;
  right: 20px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
}

.page-header .page-header-wrapper .settings-menu.active {
  opacity: 1;
  top: 51px;
  visibility: visible;
  z-index: 99;
}

.page-header .page-header-wrapper .settings-menu ul {
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.page-header .page-header-wrapper .settings-menu ul li {
  display: block;
  text-align: left;
  line-height: 30px;
}

.page-header .page-header-wrapper .settings-menu ul li a {
  font-size: 0.85em;
  color: #999999;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
}

.page-header .page-header-wrapper .settings-menu ul li a span.icon {
  display: inline-block;
  margin-right: 10px;
  text-align: left;
}

.page-header .page-header-wrapper .settings-menu ul li a span.icon i {
  margin-right: 10px;
  color: #999999;
}

.page-header .page-header-wrapper .settings-menu ul li a:hover {
  color: #333333;
}

.page-header .page-header-wrapper .settings-menu ul li a:hover span.icon i {
  color: #333333;
}

.page-header .page-header-wrapper .settings-menu .settings-menu-arrow {
  width: 0;
  height: 0;
  margin-left: calc(100% - 20px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid #ffffff;
  display: block;
  text-align: right;
}

.page-header .page-header-wrapper .settings-menu-overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent;
}

.page-header .page-header-wrapper .settings-menu-overlay.active {
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  opacity: 0;
  z-index: 99;
  transition: all 0.5s ease-in-out;
  visibility: hidden;
}

.sidebar.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.95);
  visibility: visible;
}

.sidebar.active .sidebar-wrapper {
  visibility: visible;
}

.sidebar .sidebar-wrapper {
  position: fixed;
  top: 60px;
  height: 100%;
  width: 100%;
  padding: 5px 20px 20px;
  visibility: hidden;
}

.sidebar .sidebar-wrapper ul li {
  list-style: none;
  transition-delay: 0.15s;
  transform: translate(-50px, 0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  color: #ffffff;
  text-transform: none;
  display: block;
}

.sidebar .sidebar-wrapper ul li i {
  display: inline-block;
  width: 20px;
}

.sidebar .sidebar-wrapper ul li.section {
  margin-top: 10px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.035);
  width: 100%;
}

.sidebar .sidebar-wrapper ul li ul {
  border: none;
}

.sidebar .sidebar-wrapper ul li ul li:last-child {
  margin-bottom: 0;
}

.sidebar .sidebar-wrapper ul li ul li a {
  text-transform: none;
  margin-left: 5px;
}

.sidebar .sidebar-wrapper ul li.section {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 1em;
}

.sidebar .sidebar-wrapper ul li a {
  color: #999999;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  font-size: 0.85em;
  padding: 10px 0;
  transition: all 0.3s ease-in-out;
}

.sidebar .sidebar-wrapper ul li a i {
  display: inline-block;
  width: 20px;
}

.sidebar .sidebar-wrapper ul li a:hover {
  color: #ffffff;
  margin-left: 5px;
}

.sidebar .sidebar-wrapper.active ul li {
  transform: translate(0, 0);
  opacity: 1;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(1) {
  transition-delay: 0.1s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(2) {
  transition-delay: 0.15s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(3) {
  transition-delay: 0.2s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(4) {
  transition-delay: 0.25s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(5) {
  transition-delay: 0.3s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(6) {
  transition-delay: 0.35s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(7) {
  transition-delay: 0.4s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(8) {
  transition-delay: 0.45s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(9) {
  transition-delay: 0.5s;
}

.sidebar .sidebar-wrapper.active ul li:nth-child(10) {
  transition-delay: 0.55s;
}
</style>
</head>
<body>
  <body>
  <div id="menu-header-container" class="page-header">
    <div id="menu-header-container-wrapper" class="page-header-wrapper">
      <div class="hamburger-wrapper">
        <a id="menu-hamburger-menu" class="hamburger-menu {{^showHamburger}}hidden{{/showHamburger}}" href="#" title="Menu">
          <span class="line line-1"></span>
          <span class="line line-2"></span>
          <span class="line line-3"></span>
        </a>
      </div>
    </div>
  </div>

  <div id="menu" class="sidebar">
    <div id="menu-wrapper" class="sidebar-wrapper">
      <ul id="home">
        <li><a data-id="dashboard" href="#"><i class="fa fa-home"></i> Home</a></li>
        <li class="section"><i class="fa fa-search"></i> Browse</li>
        <li><a data-id="browsepresentations" href="#"><i class="fa fa-pencil-square-o"></i> Posts</a></li>
        <li><a data-id="browsedocuments" href="#"><i class="fa fa-file-o"></i> Files</a></li>

        <li class="section"><i class="fa fa-check-circle-o"></i> Your downloads</li>
        <li><a data-id="presentations" href="#"><i class="fa fa-pencil-square"></i> Posts</a></li>
        <li><a data-id="documents" href="#"><i class="fa fa-file"></i> Files</a></li>

        <li class="section"><i class="fa fa-paper-plane-o"></i> Messages</li>
        <li><a data-id="browsemessages" href="#"><i class="fa fa-inbox"></i> Inbox</a></li>
      </ul>
    </div>
  </div>

  <div class="container">

    <div class="row">

      <h2>Some Lorem Ipsum</h2>

      <p class="col-6">
        Some Text Here
      </p>

    </div>
  </div>
</body>
      <script>
document.addEventListener("DOMContentLoaded", function () {
  var self = this;
  this.elements = {
    header: {
      container: function () {
        return document.getElementById("menu-header-container");
      },
      hamburgerMenu: function () {
        return document.getElementById("menu-hamburger-menu");
      } },

    sidebar: {
      overlay: function () {
        return document.getElementById("menu");
      },
      wrapper: function () {
        return document.getElementById("menu-wrapper");
      } } };


  this.binds = function () {
    var sideLinks = document.querySelectorAll(".sidebar-wrapper li a");
    sideLinks.forEach(function (link) {
      link.addEventListener("click", function (e) {
        e.preventDefault();

        document.querySelector("body").classList.remove("disable-scroll");
        self.elements.header.hamburgerMenu().classList.remove("active");
        self.elements.sidebar.overlay().classList.remove("active");
        self.elements.sidebar.wrapper().classList.remove("active");
        self.elements.header.container().classList.remove("sidebar-open");
      });
    });

    // Changes header colour after scrolled by 100px
    window.addEventListener("scroll", function (e) {
      var scrollTop =
      window.pageYOffset !== undefined ?
      window.pageYOffset :
      (document.documentElement ||
      document.body.parentNode ||
      document.body).
      scrollTop;
      if (scrollTop > 100) {
        if (self.elements.header.container()) {
          self.elements.header.container().classList.add("scrolled");
        }
      } else {
        if (self.elements.header.container()) {
          self.elements.header.container().classList.remove("scrolled");
        }
      }
    });

    // Hamburger menu
    if (this.elements.header.hamburgerMenu()) {
      self.elements.header.
      hamburgerMenu().
      addEventListener("click", function (e) {
        e.preventDefault();

        this.classList.toggle("active");
        document.querySelector("body").classList.toggle("disable-scroll");
        self.elements.sidebar.overlay().classList.toggle("active");
        self.elements.sidebar.wrapper().classList.toggle("active");
        self.elements.header.container().classList.toggle("sidebar-open");
      });
    }

    // Hide sidebar when click target is not a link
    if (this.elements.sidebar.overlay()) {
      self.elements.sidebar.overlay().addEventListener("click", function (e) {
        e.preventDefault();

        document.querySelector("body").classList.remove("disable-scroll");
        if (e.target.tagName.toLowerCase() !== "a") {
          self.elements.header.hamburgerMenu().classList.remove("active");
          self.elements.sidebar.overlay().classList.remove("active");
          self.elements.sidebar.wrapper().classList.remove("active");
          self.elements.header.container().classList.remove("sidebar-open");
        }
      });
    }
  };

  this.binds();
});
    </script>
</body>
</html>

10. By Nodws

Made by Nodws. Fullscreen menu with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,500,600'>
  
<style>
body {
  background: #100F0F;
  color: #696d6d;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
body.abrido{
  overflow:hidden
}
#header-main {
  position: fixed;
  box-shadow: 0 0 0 0 rgba(243, 243, 243, 1) inset;
  height: 100px;
  width: 100%;
  z-index:99;
  transition: all .2s;
}

#header-main.arre {
  position: fixed;
  box-shadow: 0 93px 0 0 rgba(243, 243, 243, 1) inset;
}

.brand {
  position: absolute;
  top: .6em;
  left: 2em;
  z-index: 6;
  font-family: sans-serif;
  text-transform: uppercase;
  color:#ddd;
  font-weight:600;
  font-size:2em;
  padding:.2em .5em;
  border:2px solid rgba(200,200,200,0);
  text-decoration:none;
  margin: 0;
  transition:.2s
}
.brand:hover, .abrido .brand{
   border:2px solid rgba(200,200,200,1);
}
.arre .brand{
  color:#333
}
.arre .brand:hover{
   border:2px solid rgba(60,60,60,.7);
}
#burger {
  position: absolute;
  top: 30px;
  right: 40px;
  height: 20px;
  display: block;
  width: 20px;
  padding: 10px;
  box-sizing:border-box;
  background: rgba(255, 255, 255, 0);
  border: 4px solid rgba(255, 255, 255, 0);
  border-radius: 3px;
  z-index: 5;
}

#burger span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: #ddd;
  transition: .4s;
}

#burger:hover {
  background: #eee;
  border-color: #eee
}

#burger:hover span {
  background-color: #333 !important
}
#burger span:first-child {
  top: 3px;
}

#burger span:last-child {
  top: 17px;
}

#burger:hover {
  cursor: pointer;
}

#burger.abrido span {
  opacity: 0;
  top: 50%;
  transform: rotate(45deg);
  background-color: #fff
}


#burger.abrido span:first-child {
  opacity: 1;
  transform: rotate(45deg);
}

#burger.abrido span:last-child {
  opacity: 1;
  transform: rotate(-45deg);
}

#nav-main {
  background: rgba(45, 45, 45, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 3;
  transition: .4s;
  transition-delay: .5s;
  overflow: hidden;
}

#nav-main ul {
  text-align: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 27vh;
  left: 0;
  right: 0;
  padding: 0;
}

#nav-main ul li {
  opacity: 0;
  position: relative;
  transform: translateY(15px);
  transition: .5s;
  transition-delay: 0s;
  list-style: none;
  display: inline-block;
  width: fit-content
}

#nav-main li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #dc3545;
  font-weight: 700;
  font-family: sans-serif;
  display: block;
  padding: 20px;
  font-size: 2em
}

#nav-main a:hover {
  color: #fff
}

#nav-main ul ul {
  text-align: left;
  top: 20px;
  left: auto;
  right: -100px;
  padding: 0;
  margin: 0px !important;
}

#nav-main li ul li {
  opacity: 1;
  transform: translateX(-80px);
  transform-origin: 0% center -20px;
  width: 0px;
  white-space: nowrap;
  overflow: hidden
}

#nav-main li ul a {
  font-size: 1.3em;
  padding: 10px 0 0 30px;
}

#nav-main ul li:hover li {
  opacity: 1;
  width: 120px;
  transform: translateX(0px);
}

#nav-main.abrido {
  height: 100%;
  background: #020304e0;
  transition-delay: 0s;
}

#nav-main.abrido>ul>li {
  opacity: 1;
  transform: translateY(0px);
  transition-delay: .5s;
}

#nav-foot {
  display:flex;
  padding: 20px 0;
  position: absolute;
  bottom: -50px;
  left: 15px;
  right: 15px;
  text-align: center;
  transition: .4s;
  opacity: 0;
  visibility: hidden;
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid
}

.abrido #nav-foot { 
  bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: 1.4s;  
}

#nav-foot .col{
  width:20vw
}

#nav-foot h5 {
  font-weight: 900;
  font-size: 1em;
  margin:0 0 .5em 0
}

#nav-foot .nav-social {
  text-align: right;
}

#nav-foot .nav-social a {
  transform-style: preserve-3d;
  color: #ddd;
  padding: 5px 10px;
  font-size: 1.8rem;
  text-decoration: none;
}

#nav-foot .nav-social a i {
  display: inline-block;
  position: relative;
  top: 0;
  transition: .2s;
}

#nav-foot .nav-social a:hover i {
  color: #dc3545;
  top: -5px;
  transition: .2s;
  animation: flpp infinite 5s;
}

@keyframes flpp {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}


#content {
  position:relative;
  padding-top: 30vh;
  background: #0d111d url(https://images.unsplash.com/photo-1486625703180-884c5c453194?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b86b1f769150f99a2478177efc9678a2) center no-repeat;
  background-size:cover;
  background-attachment:fixed;
  height: 100vh;
  display:flex;
  justify-content:center;
  z-index:1
}
#content:after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:rgba(16, 15, 25,1);
  position:absolute;
  top:0;
  left:0;
  opacity:.8;
  z-index:-1
}
#content article{
  width:60vw;
  min-width:300px;
  color:#ddd;
  text-align:center;
  font-size:2em;
  font-style:italic;
  text-shadow:1px 1px 3px rgba(0,0,0,.7)
}
#foot {
  padding-top: 20vh;
  height: 80vh;
  text-align:center
}

#foot code{
  display:block;
  padding:50px 0;
  font-size:.9em;
  font-style:italic
}
#foot code:after{
  content:"\272D";
  display:inline-block;
  transform:rotate(180deg);
  position:relative;
  top:-2px;
  left:5px
}
.btn-twtr{
  color:#ddd;
  border:2px solid;
  border-radius:3px;
  text-decoration:none;
  display:inline-block;
  padding:5px 10px;
  font-family:sans-serif;
  font-weight:600;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.8;
}.btn-twtr:hover{color:#0af;}
.btn-twtr:after{content:"\1F426";padding-left:5px}
</style>
</head>
<body>
  <header id="header-main">
<a href="#" class="brand">Agency</a>
<a href="#" id="burger"> <span></span> <span></span> <span></span> </a>

<nav id="nav-main">    
  <ul>
    <li><a href="#">PROJECTS</a>
	  <ul>
	    <li><a href="#">Link #1</a></li>
	    <li><a href="#">Link #2</a></li>
	    <li><a href="#">Link #3</a></li>
	  </ul>  
    </li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>  
	<div id="nav-foot">
		
			<div class="col"><h5>JUAREZ</h5>	(555) 1204 0433</div>
			<div class="col"><h5>LONDON</h5> (555) 1107 2691</div>
			<div class="col"><h5>NEWYORK</h5> (555) 257 0482</div>
			<div class="col-6 nav-social">
				<a href="#"><i class="fa fa-instagram"></i></a>
				<a href="#"><i class="fa fa-facebook-official"></i></a>
				<a href="#"><i class="fa fa-twitter"></i></a>
				<a href="#"><i class="fa fa-whatsapp"></i></a>
			</div>
		
	</div>
</nav>
</header>
<section id="content">
  <article><h1>We are Creative</h1>
   
    <p>Building the future of brands with amazing UX</p>
  </article>
</section>
<section id="foot">
  <p>Feel free to use this menu on your projects or starter themes ;)</p>
  
 <a href="https://twitter.com/nodws" class="btn-twtr" target="_b">Follow me on Twitter</a>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
//By @nodws

$(window).scroll(function () {

  let oppai = $(this).scrollTop();

  $('#content article').css({ opacity: 100 / oppai, filter: 'blur(' + oppai / 100 + 'px)' });
  $('#content').css({ opacity: 100 / oppai });

  if (oppai > 190) {
    if (!$('body').hasClass('abrido'))
    $('#header-main').addClass('arre');
  } else
  {
    $('#header-main').removeClass('arre');
  }
});

$('#burger').on('click', function (e) {

  e.preventDefault();

  $('#nav-main, body, #burger').toggleClass('abrido');

  if ($('#header-main').hasClass('arre'))
  {$('#header-main').removeClass('arre').addClass('arreno');} else
  if ($('#header-main').hasClass('arreno'))
  {$('#header-main').removeClass('arreno');
    setTimeout(() => {$('#header-main').addClass('arre');}, 800);}

});
    </script>
</body>
</html>

11. By Timo Kern

Made by Timo Kern. Fullscreen JavaScript menu with cool slide animation and hover animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Source Sans Pro", sans-serif;
  color: #454545;
  letter-spacing: 0.5px;
  position: relative;
}

body {
  padding: 8em 3em 3em;
}
body main {
  width: 100%;
  height: auto;
}
body main img {
  width: 100%;
  display: block;
}
body main h1 {
  font-size: 3em;
  font-weight: 900;
  text-transform: uppercase;
  color: #1e1e1e;
}

.hamburger {
  width: 2em;
  height: 2em;
  position: absolute;
  top: 3em;
  right: 3em;
  z-index: 10000;
  background: transparent;
  cursor: pointer;
}
.hamburger.is-active .hamburger--container .hamburger--bars {
  background: white;
}
.hamburger.is-active .hamburger--container .hamburger--bars:before, .hamburger.is-active .hamburger--container .hamburger--bars:after {
  background: white;
}
.hamburger.is-active .hamburger--container .hamburger--bars:before {
  left: 0.25em;
}
.hamburger.is-active .hamburger--container .hamburger--bars:after {
  left: -0.25em;
}
.hamburger .hamburger--container {
  width: 100%;
  padding: 0.25em;
  position: relative;
}
.hamburger .hamburger--container .hamburger--bars {
  height: 3px;
  width: 1.5em;
  background: #000;
  position: absolute;
  top: 0.9em;
  transition: 0.3s ease;
}
.hamburger .hamburger--container .hamburger--bars:before, .hamburger .hamburger--container .hamburger--bars:after {
  content: "";
  display: block;
  height: 3px;
  width: 1.5em;
  background: inherit;
  position: absolute;
  left: 0;
  transition: 0.3s ease;
}
.hamburger .hamburger--container .hamburger--bars:before {
  top: -0.5em;
}
.hamburger .hamburger--container .hamburger--bars:after {
  top: 0.5em;
}

.logo {
  width: 5em;
  height: 5em;
  position: absolute;
  top: 1.5em;
  left: 3em;
  z-index: 10000;
  filter: invert(1);
}
.logo img {
  width: 100%;
  display: block;
  transition: 0.3s linear 0.3s;
}
.logo.is-active img {
  filter: invert(100%);
}

.fsmenu {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden;
  display: none;
}
.fsmenu .fsmenu--container {
  width: 0;
  height: 100vh;
  padding: 8em 3em 3em;
  background: #000;
  position: absolute;
  right: 0;
  overflow: hidden;
}
.fsmenu .fsmenu--container .fsmenu--text-block {
  width: 100%;
  height: 100%;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container {
  width: 100%;
  height: 100%;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element {
  width: 100%;
  height: 25%;
  list-style-type: none;
  text-align: right;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: 0.2s ease;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element a:hover {
  color: #E63946;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element a span {
  font-size: 5em;
  font-weight: 700;
  letter-spacing: 10px;
  text-transform: uppercase;
  line-height: 1;
  height: 1em;
  display: inline-block;
  position: relative;
  z-index: 1002;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element a span:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  z-index: 1003;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element .fsmenu--scrolling-text {
  height: 100%;
  display: flex;
  align-items: center;
  transform: translate(-20%, -100%);
  opacity: 0;
  pointer-events: none;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element .fsmenu--scrolling-text span {
  height: 1em;
  font-size: 8em;
  font-weight: 900;
  letter-spacing: 10px;
  text-transform: uppercase;
  line-height: 1;
  color: #1e1e1e;
  display: inline-block;
  margin-right: 1em;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element:hover .fsmenu--scrolling-text {
  opacity: 1;
  -webkit-animation: animScrollingContactTextLeft 9s linear 0s infinite;
          animation: animScrollingContactTextLeft 9s linear 0s infinite;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element .fsmenu--link-img {
  width: 0px;
  height: 100vh;
  padding: 8em 3em 3em;
  position: absolute;
  top: 0;
  right: calc(100vw - 720px);
  z-index: 1001;
  font-size: 16px;
  pointer-events: none;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element .fsmenu--link-img .fsmenu--img-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element .fsmenu--link-img .fsmenu--img-container img {
  width: 624px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element.open .fsmenu--link-img {
  left: auto;
  right: calc(100vw - 720px);
  -webkit-animation: animMenuRevealImg 0.4s ease 0s forwards;
          animation: animMenuRevealImg 0.4s ease 0s forwards;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element.open .fsmenu--link-img .fsmenu--img-container img {
  right: 0;
  left: auto;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element.is-closing .fsmenu--link-img {
  left: 0;
  right: auto;
  -webkit-animation: animMenuCloseImg 0.4s ease 0s forwards;
          animation: animMenuCloseImg 0.4s ease 0s forwards;
}
.fsmenu .fsmenu--container .fsmenu--text-block .fsmenu--text-container .fsmenu--list .fsmenu--list-element.is-closing .fsmenu--link-img .fsmenu--img-container img {
  left: 0;
  right: auto;
}
.fsmenu.is-active {
  display: block;
}
.fsmenu.is-active .fsmenu--container {
  -webkit-animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
          animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
}
.fsmenu.is-active .fsmenu--container .fsmenu--text-container .fsmenu--list .fsmenu--list-element a span:before {
  -webkit-animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards;
          animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards;
}
.fsmenu.close-menu {
  display: block;
}
.fsmenu.close-menu .fsmenu--container {
  width: 100vw;
  right: auto;
  left: 0;
  -webkit-animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards;
          animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards;
}
.fsmenu.close-menu .fsmenu--container .fsmenu--text-container .fsmenu--list .fsmenu--list-element a span:before {
  left: auto;
  right: 0;
  background: black;
  -webkit-animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
          animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
}

@-webkit-keyframes animMenuReveal {
  0% {
    width: 0vw;
  }
  100% {
    width: 100vw;
  }
}

@keyframes animMenuReveal {
  0% {
    width: 0vw;
  }
  100% {
    width: 100vw;
  }
}
@-webkit-keyframes animMenuRevealLinks {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes animMenuRevealLinks {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@-webkit-keyframes animMenuClose {
  0% {
    width: 100vw;
    padding: 8em 3em 3em;
  }
  100% {
    width: 0vw;
    padding: 8em 0 0;
  }
}
@keyframes animMenuClose {
  0% {
    width: 100vw;
    padding: 8em 3em 3em;
  }
  100% {
    width: 0vw;
    padding: 8em 0 0;
  }
}
@-webkit-keyframes animMenuCloseLinks {
  0% {
    width: 0%;
  }
  100% {
    width: 110%;
  }
}
@keyframes animMenuCloseLinks {
  0% {
    width: 0%;
  }
  100% {
    width: 110%;
  }
}
@-webkit-keyframes animMenuRevealImg {
  0% {
    width: 0;
  }
  100% {
    width: 720px;
  }
}
@keyframes animMenuRevealImg {
  0% {
    width: 0;
  }
  100% {
    width: 720px;
  }
}
@-webkit-keyframes animMenuCloseImg {
  0% {
    width: 720px;
  }
  100% {
    width: 0;
  }
}
@keyframes animMenuCloseImg {
  0% {
    width: 720px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes animScrollingContactTextLeft {
  0% {
    transform: translate(-20%, -100%);
  }
  100% {
    transform: translate(-40%, -100%);
  }
}
@keyframes animScrollingContactTextLeft {
  0% {
    transform: translate(-20%, -100%);
  }
  100% {
    transform: translate(-40%, -100%);
  }
}
</style>
</head>
<body>
  <div class="logo">
		<img src="https://witwinkel.ch/themes/witwinkel/assets/images/logo/witwinkel_white.png">
	</div>

<div class="hamburger">
	<div class="hamburger--container">
		<div class="hamburger--bars">
			
		</div>
	</div>
</div>
<div class="fsmenu">
	<div class="fsmenu--container">
		<div class="fsmenu--text-block">
			<div class="fsmenu--text-container">
				<ul class="fsmenu--list">
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Agentur</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span><span>Agentur</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="https://witwinkel.ch/themes/witwinkel/assets/images/content/WITWINKEL-buero-albisrieden-2019.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Portfolio</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span><span>Portfolio</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="https://witwinkel.ch/themes/witwinkel/assets/projects/gourmet-festival-2019/content12.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Team</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Team</span><span>Team</span><span>Team</span><span>Team</span><span>Team</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="https://witwinkel.ch/themes/witwinkel/assets/images/team/wirsind-witwinkel.jpg">
							</div>
						</div>
					</li>
					<li class="fsmenu--list-element">
						<a href="#">
							<span>Kontakt</span>
						</a>
						<div class="fsmenu--scrolling-text">
							<span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span><span>Kontakt</span>
						</div>
						<div class="fsmenu--link-img">
							<div class="fsmenu--img-container">
								<img src="https://witwinkel.ch/themes/witwinkel/assets/projects/metzler/content1.jpg">
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<main>
	<img src="https://witwinkel.ch/themes/witwinkel/assets/projects/alfa-romeo-alfabet/content1.jpg">
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {


  $('.hamburger').click(function () {

    var $this = $(this);

    if ($this.hasClass('is-active')) {
      $('.fsmenu, .logo').removeClass('is-active');
      $('.fsmenu, .logo').addClass('close-menu');
    } else {
      $('.fsmenu, .logo').removeClass('close-menu');
      $('.fsmenu, .logo').addClass('is-active');
    };
    $this.toggleClass('is-active');
  });

  $(".fsmenu--list-element").hover(
  function () {
    $(this).addClass('open');
    $(this).removeClass('is-closing');
  }, function () {
    $(this).removeClass('open');
    $(this).addClass('is-closing');
  });


});
    </script>
</body>
</html>