7+ CSS Fullscreen Menu Examples

This post contains a total of 7+ Hand-Picked CSS Fullscreen Menu Examples with Source Code. All these Fullscreen Menus are made using CSS.

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

Related Posts

CSS Fullscreen Menu Examples

1. By Calvin Lai

Made by Calvin Lai. Fullscreen menu with amazing animation. 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=Open+Sans:400,700);
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
}

body {
  background: #e0e0e0;
  background-image: url("Your Own Image URL HERE")
  background-size: cover;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.navigation__checkbox {
  display: none;
}
.navigation__button {
  background-color: #fff;
  height: 6rem;
  width: 6rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
}
.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#03a9f4, #03a9f4);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
}
.navigation__item {
  margin: 1rem;
}
.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    transparent 50%,
    #fff 50%
  );
  background-size: 220%;
  transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1.5rem;
  display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #90caf9;
  transform: translateX(1rem);
}
.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80);
}
.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%;
}
.navigation__icon {
  position: relative;
  margin-top: 3rem;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
  width: 3rem;
  height: 2px;
  background-color: #b0bec5;
  display: inline-block;
}
.navigation__icon::before,
.navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s;
}
.navigation__icon::before {
  top: -0.8rem;
}
.navigation__icon::after {
  top: 0.8rem;
}
.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg);
}
</style>
</head>
<body>
  <div class="navigation">
  <input type="checkbox" class="navigation__checkbox" id="navi-toggle">

  <label for="navi-toggle" class="navigation__button">
    <span class="navigation__icon">&nbsp;</span>
  </label>

  <div class="navigation__background">&nbsp;</div>

  <nav class="navigation__nav">
    <ul class="navigation__list">
      <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>About Us</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benfits</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tours</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
    </ul>
  </nav>
</div>
</body>
</html>

2. By Akshay Nair

Made by Akshay Nair. Simple CSS 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:400,900);
:root {
  font-size: 16px;
}

* {
  box-sizing: border-box;
  font-family: "Roboto", "Helvetica", "sans-serif";
  color: #555;
}

body {
  margin: 0;
  padding: 0;
  background-color: #151b1d;
}

main {
  min-width: 200px;
  max-width: 800px;
  margin: 80px auto;
  padding: 10px;
}
main .wrap {
  padding: 40px 20px;
  background-color: #fff;
}
main .title {
  font-size: 2em;
  text-align: center;
  margin: 20px auto 40px;
  text-transform: uppercase;
}

header nav {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
header nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}
header nav ul li {
  transform: translateY(50px);
  opacity: 0;
}
header nav ul li a {
  display: block;
  font-size: 2em;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
header nav ul li a:hover {
  color: #E84A5F;
}

.toggle-btn {
  display: block;
  position: fixed;
  z-index: 10;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.toggle-btn .bar {
  width: 30px;
  height: 2px;
  margin: 7px auto;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.toggle-btn .bar:nth-child(2) {
  width: 20px;
}

#toggle:checked ~ nav {
  opacity: 1;
  visibility: visible;
}
#toggle:checked ~ nav ul {
  top: 70px;
}
#toggle:checked ~ nav ul li {
  transform: translateY(0px);
  opacity: 1;
}
#toggle:checked ~ nav ul li:nth-child(1) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}
#toggle:checked ~ nav ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}
#toggle:checked ~ nav ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}
#toggle:checked ~ nav ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}
#toggle:checked + label.toggle-btn .bar {
  background-color: red;
}
#toggle:checked + label.toggle-btn .bar:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
}
#toggle:checked + label.toggle-btn .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#toggle:checked + label.toggle-btn .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
</style>
</head>
<body>
  <header>
  <input type='checkbox' id='toggle' style='display:none;' />
  <label class='toggle-btn toggle-btn__cross' for='toggle'>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </label>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact me</a></li>
    </ul>
  </nav>
</header>

<main>
  <div class='wrap'>
    <div class='title'>PureCSS fullscreen menu</div>
    <div class="content">
      Hellloo from the other Siiiiidddddeeeeee......<br />
      Lorem ipsum
    </div>
  </div>
</main>
</body>
</html>

3. By Eduazy

Made by Eduazy. Fullscreen menu with sliding animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*, *::before, *::after {
  font-family: system-ui;
  box-sizing: border-box;
  margin: 0;
}

body, html {
  width: 100%;
  height: 100%;
  padding: 1%;
  background-color: black;
  color: white;
}

label {
  cursor: pointer;
  z-index: 9999;
}

input[type="checkbox"].menu {
  opacity: 0;
  position: relative;
  top: 25px;
  left: 0;
  display: block;
  width: 45px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
}

input[type="checkbox"].menu + label {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-contents: center;
  align-items: center;
  width: 45px;
  height: 5px;
  background-color: white;
}

input[type="checkbox"].menu:hover + label::before, input[type="checkbox"].menu:hover + label::after {
  width: 60px;
}

input[type="checkbox"].menu + label::before, input[type="checkbox"].menu + label::after {
  content: '';
  position: absolute;
  width: 45px;
  height: 5px;
  background-color: white;
  transition: .25s;
}

input[type="checkbox"].menu + label::before {
  top: -12px;
}
input[type="checkbox"].menu + label::after {
  top: 12px;
}

input[type="checkbox"].menu:checked + label::before {
  transform: translateY(12px);
}

input[type="checkbox"].menu:checked + label::after {
  transform: translateY(-12px);
}

ul {
  font-size: 4rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.sideMenu {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background-color: rgba(255,255,255,.25);
  transition: transform .5s;
}

input[type="checkbox"].menu:checked ~ .sideMenu {
  transform: translateX(100%);
}
</style>
</head>
<body>
  <input type="checkbox" id="check" class="menu">
<label for="check"></label>

<nav class="sideMenu">
  <ul>
    <li>ABOUT</li>
    <li>WORK</li>
    <li>CONTACT</li>
  </ul>
</nav>
</body>
</html>

4. By BryanE

Made by BryanE. Fullscreen CSS Menu with Smooth slide effect. 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=Lato");
body {
  overflow-x: hidden;
  font-family: "Lato";
  background: url(http://unsplash.it/1920/1280);
  background-size: cover;
}

.burger-toggle {
  position: absolute;
  top: -99999;
  left: -99999;
}

.burger {
  position: absolute;
  width: 50px;
  right: 2rem;
  top: 2rem;
}

.burger span {
  display: block;
  width: 100%;
  height: 5px;
  background: white;
  position: absolute;
  transform: rotate(0);
  transition: 0.25s ease all;
  border-radius: 8px;
}

.burger span:nth-child(1) {
  top: 0;
}

.burger span:nth-child(2) {
  top: 10px;
  transform: translateX(0);
}

.burger span:nth-child(3) {
  top: 20px;
}

.burger span:nth-child(1),
.burger span:nth-child(3) {
  transition-delay: 250ms;
}

.menu-wrap .fullscreen {
  background: #CC2014;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: 0.25s ease transform;
  will-change: transform;
  transition-delay: 1250ms;
}

.navigation a:link {
  text-decoration: none;
  display: block;
  color: white;
  font-size: 4rem;
  line-height: 1;
  padding-bottom: 2rem;
  transform: translateX(50px);
  transition: 250ms ease all;
  opacity: 0;
}

.navigation a:visited {
  color: white;
}

.navigation li:nth-child(1) a:link {
  transition-delay: 250ms;
}

.navigation li:nth-child(1) a:hover {
  transition-delay: 0ms;
}

.navigation li:nth-child(2) a:link {
  transition-delay: 500ms;
}

.navigation li:nth-child(2) a:hover {
  transition-delay: 0ms;
}

.navigation li:nth-child(3) a:link {
  transition-delay: 750ms;
}

.navigation li:nth-child(3) a:hover {
  transition-delay: 0ms;
}

.navigation li:nth-child(4) a:link {
  transition-delay: 1000ms;
}

.navigation li:nth-child(4) a:hover {
  transition-delay: 0ms;
}

.burger-toggle:checked ~ .menu-wrap .fullscreen {
  transform: translateX(0);
  transition-delay: 0ms;
}
.burger-toggle:checked ~ .menu-wrap .burger span {
  top: 10px;
}
.burger-toggle:checked ~ .menu-wrap .burger span:nth-child(1) {
  transform: rotate(45deg);
}
.burger-toggle:checked ~ .menu-wrap .burger span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50px);
}
.burger-toggle:checked ~ .menu-wrap .burger span:nth-child(3) {
  transform: rotate(-45deg);
}
.burger-toggle:checked ~ .menu-wrap .navigation a:link {
  transform: translateX(0);
  opacity: 1;
}
.burger-toggle:checked ~ .menu-wrap .navigation a:link:hover {
  transition-delay: 0;
  transform: translateX(0.5em);
}
</style>
</head>
<body>
  <input class="burger-toggle" type="checkbox" id="burger-toggle"/>
<label class="menu-wrap" for="burger-toggle">
  <div class="fullscreen">
    <ul class="navigation">
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
    </ul>
  </div>
  <div class="burger"><span></span><span></span><span></span></div>
</label>
</body>
</html>

5. By Rich Wertz

Made by Rich Wertz. Full Size Screen Menu with Icons and hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/base_blackBG.css'> 
<style>
html, body, h1 {
	padding: 0;
	margin: 0;
}

/*
Set the navigation to a size matching the available screen space using vw/vh. These measurement units allow the measurement in proportion to the browser window size.
*/

nav {
	display: block;
	box-sizing: border-box;
	background: #000;
	color: #fff;
	width: 100vw;
	height: 100vh;
	text-align: left;
}
/*
Nav links need to be styled in order to overwirte the browser default settings. The effect below presents the text links to appear with an outline color. This is achieved by setting the text color to be the same as the background.
The outline is achieved by using text shadow to provide an outline effect for the text.
Changes to both the text color and the outline are set to animation using the transition attribute.
*/

nav a {
	position: relative;
	display: block;
	font-size: 1cm;
	text-decoration: none;
	padding: .5em 2em;
	color: #000;
	text-shadow: #fff 0px 0px 2px;
	transition: color 1.5s, text-shadow 1.5s;
}

/*
Nav icon default
Settings to display the icons are applied to each link using their 'after' virtual element. The foundation settings are used to set the size and position of the icon towards the left side of the link text. Opacity and its associated transition settings prepare the link to animate when its opacity is changed from invisible.
Background-size is also set to contain for fitting any image applied as the background.
*/

nav a::after {
	content: "";
	position: absolute;
	display: block;
	left: .5em;
	top: .5em;
	width: 1em;
	height: 1em;
	background-size: contain;
	opacity: 0;
	transition: opacity 1.5s;
}

/*
Link interactions
Interactions with the link are detected using the hover selector. When links are hovered by the mouse pointer, the text color is set to white, while their text-shadow outline is set to disappear.
Additionally, the vurtual 'after' element has its opacity set to become fully visible. As all of these attributes have a transition applied to them, their changes will appear animated.
*/

nav a:hover {
	text-shadow: transparent 0px 0px 0px;
	color: #fff;
}

nav a:hover::after {
	opacity: 1;
}

/*
Icons associated with the links are defined using the background-image attribute applied to the virtual 'after' element. With the previously applied settings already defining background-size as contain, the browser will automatically resize the image. Other settings relating to the size and position of the icon are inhereted from navigation icon defaults.
*/

nav a:nth-of-type(1)::after {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/PenguinsLogos_WIRE_WT.png);
}

nav a:nth-of-type(2)::after {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/PenguinsPatchWireWT_StadiumSeries_2017.png);
}

nav a:nth-of-type(3)::after {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/PenguinsPatchWireWT_StadiumSeries_2019.png);
}
</style>
</head>
<body>
  <nav>
	<h1>Menu</h1>
	<a href="#">Alpha </a>
	<a href="#">Beta </a>
	<a href="#">Gamma </a>
</nav>
</body>
</html>

6. By Alphardex

Made by Alphardex. CSS Fullscreen with Image Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/[email protected]/dist/aqua.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: Lora, sans-serif;
}

p {
  margin: 0;
}

#burger-toggle {
  position: absolute;
  appearance: none;
  opacity: 0;
}
#burger-toggle:checked ~ .menu {
  opacity: 1;
  visibility: visible;
}
#burger-toggle:checked ~ .menu .menu-nav-link span div,
#burger-toggle:checked ~ .menu img,
#burger-toggle:checked ~ .menu .title p {
  transform: translateY(0);
  transition: 1.2s 0.1s cubic-bezier(0.35, 0, 0.07, 1);
}
#burger-toggle:checked ~ .menu .image-link:nth-child(1) img {
  transition-delay: 0.18s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(2) img {
  transition-delay: 0.26s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(3) img {
  transition-delay: 0.34s;
}
#burger-toggle:checked ~ .menu .image-link:nth-child(4) img {
  transition-delay: 0.42s;
}
#burger-toggle:checked ~ .burger-menu .line::after {
  transform: translateX(0);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(1) {
  transform: translateY(calc(var(--burger-menu-radius) / 5)) rotate(45deg);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(2) {
  transform: scaleX(0);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(3) {
  transform: translateY(calc(var(--burger-menu-radius) / -5)) rotate(-45deg);
}

.burger-menu {
  --burger-menu-radius: 4em;
  position: fixed;
  top: 5vh;
  left: 5vw;
  z-index: 100;
  display: block;
  width: var(--burger-menu-radius);
  height: var(--burger-menu-radius);
  outline: none;
  cursor: pointer;
}
.burger-menu .line {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 3px;
  background: rgba(43, 61, 79, 0.3);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.5s;
}
.burger-menu .line:nth-child(1) {
  top: 30%;
}
.burger-menu .line:nth-child(2) {
  top: 50%;
}
.burger-menu .line:nth-child(3) {
  top: 70%;
}
.burger-menu .line::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color-darker);
  transform: translateX(-100%);
  transition: 0.25s;
}
.burger-menu .line:nth-child(2)::after {
  transition-delay: 0.1s;
}
.burger-menu .line:nth-child(3)::after {
  transition-delay: 0.2s;
}
.burger-menu:hover .line::after {
  transform: translateX(0);
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1e23;
  opacity: 0;
  overflow-x: hidden;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 750px) {
  .menu {
    display: block;
  }
}
.menu-nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-type: none;
}
@media screen and (max-width: 750px) {
  .menu-nav {
    flex-direction: column;
  }
}
.menu-nav-item {
  flex: 1;
}
.menu-nav-link {
  position: relative;
  display: inline-flex;
  font-size: 2rem;
  color: white;
  text-decoration: none;
}
.menu-nav-link span {
  overflow: hidden;
}
.menu-nav-link span div {
  transform: translateY(102%);
}
.menu-nav-link::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}
.menu-nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.menu .gallery {
  margin-top: 60px;
  text-align: center;
}
.menu .title {
  font-size: 24px;
  color: white;
  overflow: hidden;
}
.menu .title p {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: translateY(102%);
}
.menu .images {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
  .menu .images {
    justify-content: center;
  }
}
.menu .images .image-link {
  width: 15vw;
  margin: 0 12px;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .menu .images .image-link {
    width: 40vw;
    margin: 0 12px 12px 0;
  }
}
.menu .images .image-link .image {
  position: relative;
  transition: 0.6s;
}
.menu .images .image-link .image::before {
  position: absolute;
  content: attr(data-label);
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.4s;
}
.menu .images .image-link:hover .image {
  transform: scale(1.2);
}
.menu .images .image-link:hover .image::before {
  opacity: 1;
}
.menu .images img {
  height: 250px;
  transform: translateY(102%);
}
</style>
</head>
<body>
  <h1>Click the burger menu to see the magic.</h1>
<input type="checkbox" id="burger-toggle">
<label for="burger-toggle" class="burger-menu">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</label>
<div class="menu">
  <div class="menu-inner">
    <ul class="menu-nav">
      <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
            <div>Home</div>
          </span></a></li>
      <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
            <div>About</div>
          </span></a></li>
      <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
            <div>Service</div>
          </span></a></li>
      <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
            <div>Team</div>
          </span></a></li>
    </ul>
    <div class="gallery">
      <div class="title">
        <p>Sora Gallery</p>
      </div>
      <div class="images">
        <a class="image-link" href="#">
          <div class="image" data-label="Star"><img src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" alt=""></div>
        </a>
        <a class="image-link" href="#">
          <div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
        </a>
        <a class="image-link" href="#">
          <div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
        </a>
        <a class="image-link" href="#">
          <div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
        </a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

7. By Antonija Šimić

Made by Antonija Šimić. Fullscreen menu with cool links effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body,
html {
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

main {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.aside-section {
  top: 0;
  bottom: 0;
  position: absolute;
}

.aside-left {
  display: none;
  width: 40%;
  left: 0;
  background-color: #ff5964;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
}

.aside-right {
  width: 100%;
  right: 0;
  background-color: #38618c;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
}

.aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 150px;
  text-align: left;
  padding-left: 50px;
}

.aside-content {
  margin-top: 150px;
  padding: 0 40px;
  position: relative;
  color: white;
  text-align: center;
}

.aside-list li {
  margin-bottom: 20px;
}

.aside-anchor::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: #ff5964;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
}

.aside-anchor::before {
  border-radius: 3px;
  content: "";
  position: absolute;
  bottom: 0;
  background-color: #fff;
  left: 0;
  height: 3px;
  z-index: 1;
  width: 50%;
  -webkit-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

.aside-anchor:hover:before {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.aside-anchor {
  padding-bottom: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  position: relative;
  font-weight: 500;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ aside .aside-left {
  transform: translateY(0%);
}

input[type="checkbox"]:checked ~ aside .aside-right {
  transform: translateX(0%);
}

input[type="checkbox"]:checked ~ label .bar {
  background-color: #fff;
}

input[type="checkbox"]:checked ~ label .top {
  -webkit-transform: translateY(0px) rotateZ(45deg);
  -moz-transform: translateY(0px) rotateZ(45deg);
  -ms-transform: translateY(0px) rotateZ(45deg);
  -o-transform: translateY(0px) rotateZ(45deg);
  transform: translateY(0px) rotateZ(45deg);
}

input[type="checkbox"]:checked ~ label .bottom {
  -webkit-transform: translateY(-15px) rotateZ(-45deg);
  -moz-transform: translateY(-15px) rotateZ(-45deg);
  -ms-transform: translateY(-15px) rotateZ(-45deg);
  -o-transform: translateY(-15px) rotateZ(-45deg);
  transform: translateY(-15px) rotateZ(-45deg);
}

input[type="checkbox"]:checked ~ label .middle {
  width: 0;
}

.middle {
  margin: 0 auto;
}

label {
  top: 10px;
  display: inline-block;
  padding: 7px 10px;
  background-color: transparent;
  cursor: pointer;
  margin: 10px;
  z-index: 3;
  position: fixed;
}

.bar {
  display: block;
  background-color: #38618c;
  width: 30px;
  height: 3px;
  border-radius: 5px;
  margin: 5px auto;
  transition: background-color 0.4s ease-in, transform 0.4s ease-in,
    width 0.4s ease-in;
}

h1 {
  margin: 0;
  position: relative;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 30px;
}

h1 span {
  font-size: 20px;
  display: block;
}

p {
  font-size: 30px;
}

.button {
  display: inline-block;
  background-image: none;
  border: none;
  background-color: transparent;
  padding-bottom: 7px;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  color: white;
  padding: 7px 50px;
  border: 2px solid white;
}

@media (min-width: 992px) {
  h1 {
    font-size: 40px;
  }
  .aside-left {
    display: block;
  }

  .aside-right {
    width: 60%;
  }
}
</style>
</head>
<body>
  <main>
  <h1>
    Fullscreen menu
    <span> with cool links </span>
  </h1>
  <input type="checkbox" id="myInput">
  <label for="myInput">
      <span class="bar top"></span>
      <span class="bar middle"></span>
      <span class="bar bottom"></span>
    </label>
  <aside>
    <div class="aside-section aside-left">
      <div class="aside-content">
        <p> Some text that will make you click the cta </p>
        <button class="button"> CTA </button>
      </div>
    </div>
    <div class="aside-section aside-right">
      <ul class="aside-list">
        <li><a href="" class="aside-anchor">Link</a></li>
        <li><a href="" class="aside-anchor">Link</a></li>
        <li><a href="" class="aside-anchor">Link</a></li>
        <li><a href="" class="aside-anchor">Link</a></li>
      </ul>
    </div>
  </aside>
</main>
</body>
</html>

8. By Adilson Santos

Made by Adilson Santos. Responsive CSS 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>
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
a {
    list-style: none;
    text-decoration: none;
}

body {
    background-color: #eeeeee;
    font-size: 100%;
}
.header_text:hover{
    color: #eeeeee !important;
    border-bottom: #eeeeee solid 2px !important;
}
.navbar-small {
        background-color: #1B1B1B;
        position: fixed;
        height: 12vh;
        width: 100%;
        display: flex;
        align-items: center;
								z-index: 2;}
.header_text {
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 1.4px;
    transition: 0.2s;
    color: #FFC107;
    border-bottom: #1B1B1B solid 2px;
}
    .menu {
        margin-right: 2vw;
        width: 60px;
        height: 60px;
        bottom: 25px;
        right: 25px;
        cursor: pointer;
        transition: .5s;
    }

    #menu-hamburguer {
        display: none;
    }

    .hamburguer {
        position: relative;
        display: block;
        background: #eeeeee;
        width: 30px;
        height: 2px;
        top: 29px;
        left: 15px;
        transition: .2s;
    }

    input:checked~.links-small {
        opacity: 1;
        display: block;
    }

    .hamburguer:before,
    .hamburguer:after {
        background: #eeeeee;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        transition: .2s ease-in-out;
    }

    .hamburguer:before {
        top: -10px;
    }

    .hamburguer:after {
        bottom: -10px;
    }

    input:checked~label .hamburguer {
        transform: rotate(45deg);
    }

    input:checked~label .hamburguer:before {
        transform: rotate(90deg);
        top: 0;
    }

    input:checked~label .hamburguer:after {
        transform: rotate(90deg);
        bottom: 0;
    }

    .links-small {
        display: none;
        position: absolute;
        top: 467%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: .25s .1s cubic-bezier(0, 1.07, 0, 1.02);
        z-index: 3;
        background-color: #1B1B1B;
        width: 101%;
        height: 89vh;
        text-align: right;
    }

    .links-small li {
        padding: 2vh 1rem;
        margin-right: 2vw;
}
</style>
</head>
<body>
  <head><link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans" rel="stylesheet"></head>
<nav class="navbar-small">
	<input type="checkbox" name="" id="menu-hamburguer">
	<label for="menu-hamburguer">
                <div class="menu"><span class="hamburguer"></span></div>
            </label>
	<ul class="links-small">
		<li><a href="index.html" class="header_text">InΓ­cio</a></li>
		<li><a href="historia.html" class="header_text">HistΓ³ria</a></li>
		<li><a href="concertos.html" class="header_text">Concertos</a></li>
		<li><a href="parque.html" class="header_text">Parque</a></li>
		<li><a href="acervo.html" class="header_text">Acervo</a></li>
		<li><a href="evento.html" class="header_text">Faça seu evento</a></li>
		<li><a href="contato.html" class="header_text">Contato</a></li>
	</ul>
</nav>
</body>
</html>